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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Jul_11th/article/details/87641139

效果图：

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>
<!-- bootstrap-colorpicker.js 里面我修改了偏移量 -->
<script type="text/javascript" src="<%=basePath%>static/plugins/bootstrap-v3.3.0/js/bootstrap-colorpicker.js"></script>
<!-- 引入 ECharts 文件 -->
<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;" />
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="chart1" style="width: 95%; margin:0 auto; height: 550px; margin-top: 15px;margin-bottom: 20px;">