Echarts 通过自定义图标按钮，动态修改统计图颜色

朱雀 2020-10-17 16:17 1871阅读 0赞

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bF8xMXRo_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bF8xMXRo_size_16_color_FFFFFF_t_70 1]  
echarts：

toolbox: {
        show : true,
        feature : {
      	  myColor:{
                show : true,
                title:'颜色',
                icon:'image://static/assets/images/palette.png',
                onclick: function (){
              	  $("#echartColor").focus();
                }
            },
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    }

jsp：

<link rel="stylesheet" href="<%=basePath%>static/plugins/bootstrap-v3.3.0/css/bootstrap.css">
    <link rel="stylesheet" href="<%=basePath%>static/plugins/bootstrap-v3.3.0/css/bootstrap-colorpicker.css">
    <script type="text/javascript" src="<%=basePath%>static/plugins/jquery/jquery-1.12.4.js"></script>
    
    <script type="text/javascript" src="<%=basePath%>static/plugins/bootstrap-v3.3.0/js/bootstrap-colorpicker.js"></script>
    
    <script type="text/javascript" src="<%=basePath%>static/plugins/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/plugins/echarts/theme/customed.js"></script>
    <style>
        #echartColor {
            width: 0px;
            height: 0px;
            border: none;
        }
    </style>
    <script type="text/javascript">
    $(function(){
        $('#echartColor').colorpicker();
        $('#echartColor').on('change', function (event) {
        	//修改option重新渲染，changeColor函数省略了
            changeColor(event.color.toString());
        });
     })

<input id="echartColor" style="float: right;margin-right: 164px;"  value="#xxxx(初始颜色)"/>
    
    <div id="chart1" style="width: 95%; margin:0 auto; height: 550px; margin-top: 15px;margin-bottom: 20px;">

icon:  
![在这里插入图片描述][20190220210223691.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bF8xMXRo_size_16_color_FFFFFF_t_70]: /images/1602951413201.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bF8xMXRo_size_16_color_FFFFFF_t_70 1]: /images/1602951395418.png
[20190220210223691.png]: /images/1602951381564.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1871人围观）

还没有评论，来说两句吧...

相关阅读

相关 svg修改图标颜色

对于svg图标，想通过hover或者active 添加颜色，没有办法修改，解决办法： 1. 修改[svg图片][svg]源最开始的svg图标： ![2275efcd3b

水深无声/ 2024年03月17日 17:38/ 0 赞/ 133 阅读

相关 04 【eCharts样式定制系列】矩形树图自定义颜色

描述在目前的项目中，根据UI设计稿需要实现一个带有大屏的系统首页，在此首页上要添加地图和一些eCharts图表。但是根据UI设计稿，如果要达到美观的目的，需要对eCha

Bertha 。/ 2023年06月30日 06:46/ 0 赞/ 39 阅读

相关 Echarts地图自定义图标Symbol同时动态更改图标进行切换显示

Echarts地图自定义图标Symbol同时动态更改图标进行切换显示文章目录 0、前言 1、引用模块

深藏阁楼爱情的钟/ 2023年03月02日 13:10/ 0 赞/ 169 阅读

相关 html中柱状图的颜色,echarts中常见图表颜色自定义

1：折线图 ①：单条折线在与series同级的地方放置color数组：如图　：效果如图 ②：多条折线：同理在与series同级的地方放置color数组：例如

待我称王封你为后i/ 2022年10月07日 00:43/ 0 赞/ 209 阅读

相关【echarts】修改柱状图颜色

创建一个柱状图对象 <div id="barGragh" style="width: 100%;height:400px;margin-bottom: 5px">

迈不过友情╰/ 2022年06月17日 20:09/ 0 赞/ 343 阅读

相关 echarts toolbox增加自定义图标

原文出处：[https://blog.csdn.net/zhenyushao/article/details/67636213][https_blog.csdn.net_zhe

淡淡的烟草味﹌/ 2022年05月19日 01:35/ 0 赞/ 438 阅读

相关 echarts 折线图自定义颜色与修改legend颜色

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZf

Love The Way You Lie/ 2022年03月08日 02:48/ 0 赞/ 1229 阅读

相关 vue $confirm 自定义图标及修改图标颜色

一、先直接上解决方案，再讲解源码。 this.$confirm('', { title:"提示", message:"确认删除？",

小咪咪/ 2021年11月26日 08:01/ 0 赞/ 3213 阅读

相关重构-按钮(颜色、大小、图标按钮、动态加载按钮、朴素按钮)

实现: 控制加载动图的两种方式方式一:动态控制传入loading属性方式二:在组件的componendDidMount回调中向外暴

我就是我/ 2021年07月24日 17:36/ 0 赞/ 569 阅读

相关 Echarts 通过自定义图标按钮，动态修改统计图颜色

Echarts 通过自定义图标按钮，动态修改统计图颜色

朱雀/ 2020年10月17日 16:17/ 0 赞/ 1872 阅读