zoukankan      html  css  js  c++  java

  • Echarts字体和线条颜色设置操作笔记

    这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记，希望文章对你有所帮助，主要是自己的在线笔记吧。我在前面先放各种修改前后图片颜色的对照，后面再详细介绍代码。这样更方便阅读及读者知道，是否对自己有所帮助，其重点是如何在模板动态网页或JSP网站中插入Echarts图片。

            1.修改标题及背景颜色

      


            2.设置柱形图颜色




            3.修改坐标轴字体颜色
            4.设置Legend颜色


            5.修改折线颜色

      
     
     

            6.修改油表盘字体大小及颜色



            7.柱状图文本鼠标浮动上的颜色设置

            推荐文章：
            http://echarts.baidu.com/echarts2/doc/example/bar14.html


            http://echarts.baidu.com/echarts2/doc/example/bar15.html



            官方文档：
            http://echarts.baidu.com/echarts2/doc/example.html
            http://echarts.baidu.com/demo.html#gauge-car
            ECharts系列 - 柱状图（条形图）实例一 JSP

    1.修改标题的颜色及背景

            Echarts绘制柱状图及修改标题颜色的代码如下所示：

    [html] view plain copy
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta charset="utf-8">  
    5.     <title>ECharts</title>  
    6.     <script src="echarts.min.js"></script>  
    7. </head>  
    8.   
    9. <body>  
    10.     <div id="main" style=" 600px;height:400px;"></div>  
    11.     <script type="text/javascript">  
    12.     var myChart = echarts.init(document.getElementById('main'));  
    13.        
    14.     var labelRight = {  
    15.         normal: { position: 'right' }  
    16.     };  
    17.   
    18.     var labelRight = {  
    19.         normal: { position: 'right' }  
    20.     };  
    21.    
    22.     var option = {  
    23.   
    24.         title: {  
    25.             text: '十大高耗水行业用水量八减两增 ',    //标题  
    26.             backgroundColor: '#ff0000',            //背景  
    27.             subtext: '同比百分比(%)',               //子标题  
    28.   
    29.             textStyle: {  
    30.                 fontWeight: 'normal',              //标题颜色  
    31.                 color: '#408829'  
    32.             },  
    33.   
    34.             x:"center"      
    35.         },  
    36.   
    37.     legend: {  
    38.         data:['蒸发量','降水量','最低气温','最高气温']  
    39.     },  
    40.     
    41.     tooltip : {  
    42.         trigger: 'axis',  
    43.         axisPointer : {      
    44.             // 坐标轴指示器，坐标轴触发有效  
    45.             type : 'shadow'      
    46.             // 默认为直线，可选为：'line' | 'shadow'  
    47.         }  
    48.     },  
    49.     
    50.     grid: {  
    51.         top: 80,  
    52.         bottom: 80  
    53.     },  
    54.     
    55.     xAxis: {    //设置x轴  
    56.   
    57.         type : 'value',  
    58.         position: 'top',  
    59.         splitLine: {lineStyle:{type:'dashed'}},  
    60.         max:'4',  
    61.     },  
    62.      
    63.     yAxis: {  
    64.          
    65.         type : 'category',  
    66.         axisLine: {show: false},  
    67.         axisLabel: {show: false},  
    68.         axisTick: {show: false},   
    69.         splitLine: {show: false},  
    70.    
    71.         data : ['石油加工、炼焦和核燃料加工业' ,  
    72.                 '非金属矿物制品业',   
    73.                 '化学原料和化学制品制造业',  
    74.                 '有色金属冶炼和压延加工业',  
    75.                 '造纸和纸制品业', '纺织业',  
    76.                 '电力、热力生产和供应业',  
    77.                 '非金属矿采选业',  
    78.                 '黑色金属冶炼和压延加工业',  
    79.                 '煤炭开采和洗选业'  
    80.             ]  
    81.         },  
    82.     
    83.         series : [  
    84.         {  
    85.             name: '幅度 ',  
    86.             type: 'bar',  
    87.             stack: '总量',  
    88.             label: {  
    89.                 normal: {  
    90.                     show: true,  
    91.                     formatter: '{b}'  
    92.                 }  
    93.             },  
    94.   
    95.          data:[   
    96.             {value: 0.2, label: labelRight,itemStyle:{ normal:{color:'gray'} } },  
    97.   
    98.             {value: 0.7, label: labelRight,itemStyle:{ normal:{color:'gray'} }},  
    99.                   
    100.             {value: -1.1, label: labelRight,itemStyle:{ normal:{color:'gray'} }},  
    101.                   
    102.             {value: -1.3, label: labelRight,itemStyle:{ normal:{color:'gray'} }},  
    103.                   
    104.             {value: -1.9, label: labelRight,itemStyle:{ normal:{color:'gray'} }},  
    105.     
    106.             {value: -2.9, label: labelRight,itemStyle:{ normal:{color:'gray'} }},  
    107.    
    108.             {value: -3.0, label: labelRight,itemStyle:{ normal:{color:'gray'} }},   
    109.                   
    110.             {value: -4.2, label: labelRight,itemStyle:{ normal:{color:'gray'} }},  
    111.                   
    112.             {value: -4.9, label: labelRight,itemStyle:{ normal:{color:'gray'} }},   
    113.                   
    114.             {value: -5.8, label: labelRight,itemStyle:{ normal:{color:'gray'} }},  
    115.             ]  
    116.         }  
    117.         ]  
    118.     };  
    119.   
    120.   
    121.     myChart.setOption(option);  
    122.     window.addEventListener("resize",function() {  
    123.         myChart.resize();  
    124.     });  
    125.   
    126.     </script>  
    127.   
    128.     <div id="main2" style=" 600px;height:400px;">  
    129.     </div>  
    130.   
    131. </body>  
    132. </html>  

            其中设置颜色标题的核心代码：

    [html] view plain copy
    1. title: {  
    2.     text: '十大高耗水行业用水量八减两增 ',    //标题  
    3.         backgroundColor: '#ff0000',            //背景  
    4.     subtext: '同比百分比(%)',               //子标题  
    5.   
    6.     textStyle: {  
    7.         fontWeight: 'normal',              //标题颜色  
    8.         color: '#408829'  
    9.     },  
    10.   
    11.         x:"center"      
    12. },  

            输出如下图所示：

      



    2.设置柱形图颜色

            设置柱形图颜色代码如下所示，其中颜色表参考：RGB颜色查询对照表

    [html] view plain copy
    1. series : [  
    2. {  
    3.         name: '幅度 ',  
    4.     type: 'bar',  
    5.     stack: '总量',  
    6.     label: {  
    7.         normal: {  
    8.             show: true,  
    9.             formatter: '{b}'  
    10.             }  
    11.     },  
    12.   
    13.  data:[   
    14.     {value: 0.2, label: labelRight,itemStyle:{ normal:{color:'bule'} } },  
    15.   
    16.         {value: 0.7, label: labelRight,itemStyle:{ normal:{color:'green'} }},  
    17.           
    18.     {value: -1.1, label: labelRight,itemStyle:{ normal:{color:'red'} }},  
    19.           
    20.     {value: -1.3, label: labelRight,itemStyle:{ normal:{color:'#FFB6C1'} }},  
    21.           
    22.     {value: -1.9, label: labelRight,itemStyle:{ normal:{color:'#EE7AE9y'} }},  
    23.   
    24.         {value: -2.9, label: labelRight,itemStyle:{ normal:{color:'#C1FFC1'} }},  
    25.   
    26.         {value: -3.0, label: labelRight,itemStyle:{ normal:{color:'#AB82FF'} }},   
    27.           
    28.     {value: -4.2, label: labelRight,itemStyle:{ normal:{color:'#836FFF'} }},  
    29.           
    30.     {value: -4.9, label: labelRight,itemStyle:{ normal:{color:'#00FA9A'} }},   
    31.           
    32.     {value: -5.8, label: labelRight,itemStyle:{ normal:{color:'#CD00CD'} }},  
    33.     ]  
    34. }  

            输出如下图所示：




    3.修改坐标字体颜色

            完整代码：

    [html] view plain copy
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta charset="utf-8">  
    5.     <title>ECharts</title>  
    6.     <!-- 引入 echarts.js -->  
    7.     <script src="echarts.min.js"></script>  
    8. </head>  
    9.   
    10. <body>  
    11.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
    12.     <div align="left" id="main" style=" 900px;height:500px;"></div>  
    13.     <script type="text/javascript">  
    14.         // 基于准备好的dom，初始化echarts实例  
    15.         var myChart = echarts.init(document.getElementById('main'));  
    16.      
    17.         option = {  
    18.      
    19.             title: {  
    20.                 text: '2016年上半年全国规模以上工业企业用水情况（单位：亿立方米）',   
    21.                 subtext: '数据来源：国家统计局',  
    22.                 x: 'center',  
    23.             },  
    24.    
    25.             tooltip : {  
    26.                 trigger: 'axis',  
    27.                 axisPointer : {         
    28.                     // 坐标轴指示器，坐标轴触发有效  
    29.                     type : 'shadow'         
    30.                     // 默认为直线，可选为：'line' | 'shadow'  
    31.                 }  
    32.             },  
    33.    
    34.             legend: {  
    35.                 orient: 'vertical',  
    36.                 x: 'left',  
    37.                 y:"top",  
    38.                 padding:50,     
    39.                 data: ['用水量', '减少量',]  
    40.             },  
    41.      
    42.             grid: {  
    43.                 left: '10',  
    44.                 right: '60',  
    45.                 bottom: '3%',  
    46.                 height: '30%',    
    47.                 top: '20%',  
    48.                 containLabel: true  
    49.             },  
    50.            
    51.             xAxis:  {  
    52.                 type: 'value',  
    53.                 //设置坐标轴字体颜色和宽度  
    54.                 axisLine:{  
    55.                     lineStyle:{  
    56.                         color:'yellow',  
    57.                         2  
    58.                     }  
    59.                 },  
    60.             },  
    61.    
    62.             yAxis: {  
    63.                 type: 'category',  
    64.                 //设置坐标轴字体颜色和宽度  
    65.                 axisLine:{  
    66.                     lineStyle:{  
    67.                         color:'yellow',  
    68.                         2  
    69.                     }  
    70.                 },  
    71.                 data: ['东部地区','中部地区','西部地区',]  
    72.             },  
    73.     
    74.             series: [  
    75.             {  
    76.                 name: '用水量',  
    77.                 type: 'bar',  
    78.                 stack: '总量',  
    79.                 label: {  
    80.                     normal: {  
    81.                         show: true,  
    82.                         position: 'insidelift'  
    83.                     }  
    84.                 },  
    85.                 data: [109.2, 48.2, 41 ]  
    86.             },  
    87.             {  
    88.                 name: '减少量',  
    89.                 type: 'bar',  
    90.                 stack: '总量',  
    91.                 label: {  
    92.                     normal: {  
    93.                         show: true,  
    94.                         position: 'insidelift'  
    95.                     }  
    96.                 },  
    97.                 data: [1.638, 1.0122, 1.025]  
    98.             },  
    99.         ]  
    100.     };  
    101.     myChart.setOption(option);  
    102.     </script>  
    103. </body>  
    104. </html>  

            核心代码如下所示：

    [html] view plain copy
    1. yAxis: {  
    2.   
    3.       type: 'category',  
    4.   
    5.       //设置坐标轴字体颜色和宽度  
    6.       axisLine:{  
    7.           lineStyle:{  
    8.               color:'yellow',  
    9.               2  
    10.           }  
    11.       },  
    12.    
    13.       data: ['东部地区','中部地区','西部地区',]  
    14.     },  

            输出如下图所示：




    4.设置了legend颜色

            核心代码代码如下：

    [html] view plain copy
    1. legend: {  
    2.                      
    3.       orient: 'vertical',  
    4.         
    5.       //data:['用水量','减少量'],  
    6.   
    7.       data:[ {name: '用水量',  
    8.              textStyle:{color:"#25c36c"}  
    9.                },  
    10.               {name:'减少量',  
    11.               textStyle:{color:"#25c36c"}}  
    12.           ],  
    13.   
    14.       x: 'left',  
    15.       y:"top",  
    16.       padding:50,     
    17.                   
    18.     },  

            输出如下图所示：



    5.修改折现颜色

            代码如下所示：

    [html] view plain copy
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta charset="utf-8">  
    5.     <title>ECharts</title>  
    6.     <!-- 引入 echarts.js -->  
    7.     <script src="echarts.min.js"></script>  
    8. </head>  
    9.   
    10. <body>  
    11.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
    12.     <div id="main" style=" 600px;height:400px;"></div>  
    13.     <script type="text/javascript">  
    14.         // 基于准备好的dom，初始化echarts实例  
    15.         var myChart = echarts.init(document.getElementById('main'));  
    16.         var timeData = [  
    17.             '海水','陆地苦咸水','矿井水',  
    18.             '雨水','再生水','海水淡化水'];  
    19.   
    20.         timeData = timeData.map(function (str) {  
    21.             return str.replace('2016/', '');  
    22.         });  
    23.   
    24.         option = {  
    25.             title: {  
    26.                 text: '2016年上半年全国工业用水增长率',  
    27.                  x: 'center'  
    28.             },  
    29.             tooltip: {  
    30.                 trigger: 'axis',  
    31.                 axisPointer: {  
    32.                     animation: false  
    33.                 }  
    34.             },  
    35.   
    36.             legend: {  
    37.                 data:['常规用水量','非常规用水量'],  
    38.                  x:"right",  
    39.                  y:"top",  
    40.                  padding: 50  
    41.                    },  
    42.             grid: [{  
    43.                 left: 100,  
    44.                 right: 100,  
    45.                 height: '20%',  
    46.                 top: '25%'  
    47.             },   
    48.             {  
    49.                 left: 100,  
    50.                 right: 100,  
    51.                 top: '65%',  
    52.                 height: '25%'      
    53.             }],  
    54.   
    55.             xAxis : [  
    56.             {  
    57.                 type : 'category',  
    58.                 boundaryGap : false,  
    59.                 axisLine: {onZero: true},  
    60.                 data:['地表淡水','地下淡水','自来水','其他水']  
    61.               
    62.             },  
    63.             {  
    64.                 gridIndex: 1,  
    65.                 type : 'category',  
    66.                 boundaryGap : false,  
    67.                 axisLine: {onZero: true},  
    68.                 data: timeData,  
    69.                 position: 'top'  
    70.             }  
    71.             ],  
    72.             yAxis : [  
    73.                 {  
    74.                     name : '常规用水量(%)',  
    75.                     type : 'value',  
    76.                     max : 5  
    77.                 },  
    78.                 {  
    79.                     gridIndex: 1,  
    80.                     name : '非常规用水量(%)',  
    81.                     type : 'value',  
    82.                     inverse: true  
    83.   
    84.                 }  
    85.             ],  
    86.      
    87.             series : [  
    88.             {  
    89.                 name:'常规用水量',  
    90.                 type:'line',  
    91.                 symbolSize: 8,  
    92.                 //设置折线图颜色  
    93.                 itemStyle : {    
    94.                     normal : {    
    95.                         lineStyle:{    
    96.                             color:'#ff0000'    
    97.                         }   
    98.                     }    
    99.                 },    
    100.                 hoverAnimation: false,  
    101.                 data:[-3.8,-9.0,0.0,4.5 ]  
    102.             },  
    103.             {  
    104.                 name:'非常规用水量',  
    105.                 type:'line',  
    106.                 xAxisIndex: 1,  
    107.                 yAxisIndex: 1,  
    108.                 symbolSize: 8,  
    109.                 //设置折线图颜色  
    110.                 itemStyle : {    
    111.                     normal : {    
    112.                         lineStyle:{    
    113.                             color:'#0000ff'    
    114.                         }   
    115.                     }    
    116.                 },    
    117.                 hoverAnimation: false,  
    118.                 data: [-5.8,-2.5,6.2,50.3,3.5,-3.3 ]  
    119.             }  
    120.             ]  
    121.     };  
    122.     myChart.setOption(option);  
    123.     </script>  
    124. </body>  
    125. </html>  

            其中修改折现颜色代码如下所示：

    [html] view plain copy
    1. series : [  
    2.         {  
    3.             name:'常规用水量',  
    4.             type:'line',  
    5.             symbolSize: 8,  
    6.             itemStyle : {    
    7.                 normal : {    
    8.                     lineStyle:{    
    9.                         color:'#ff0000'    
    10.                     }    
    11.                 }    
    12.             },    
    13.             hoverAnimation: false,  
    14.             data:[-3.8,-9.0,0.0,4.5 ]  
    15.         },  
    16.         {  
    17.             name:'非常规用水量',  
    18.             type:'line',  
    19.             xAxisIndex: 1,  
    20.             yAxisIndex: 1,  
    21.             itemStyle : {    
    22.                 normal : {    
    23.                     lineStyle:{    
    24.                         color:'#ff0000'    
    25.                     }    
    26.                 }    
    27.             },    
    28.             symbolSize: 8,  
    29.             hoverAnimation: false,  
    30.             data: [-5.8,-2.5,6.2,50.3,3.5,-3.3 ]  
    31.         }  
    32.     ]  

            修改图如下所示：



    6.修改油表盘字体大小及颜色

            核心代码如下所示：

    [html] view plain copy
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta charset="utf-8">  
    5.     <title>ECharts</title>  
    6.     <!-- 引入 echarts.js -->  
    7.     <script src="echarts.min.js"></script>  
    8. </head>  
    9. <body>  
    10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
    11.     <div id="main" style=" 800px;height:600px;"></div>  
    12.     <script type="text/javascript">  
    13.     // 基于准备好的dom，初始化echarts实例  
    14.     var myChart = echarts.init(document.getElementById('main'));  
    15.   
    16.     option = {  
    17.         tooltip : {  
    18.             formatter: "{a} <br/>{c}{b}"  
    19.         },  
    20.         toolbox: {  
    21.             show: true,  
    22.             feature: {  
    23.                 restore: {show: true},  
    24.                 saveAsImage: {show: true}  
    25.             }  
    26.         },  
    27.         series : [  
    28.             {  
    29.                 name: '东部地区',  
    30.                 type: 'gauge',  
    31.                 z: 3,  
    32.                 min: 0,  
    33.                 max: 120,  
    34.            
    35.                 splitNumber: 12,  
    36.                 radius: '50%',  
    37.                 axisLine: {            // 坐标轴线  
    38.                     lineStyle: {       // 属性lineStyle控制线条样式  
    39.                          10  
    40.                           
    41.                     }  
    42.                 },  
    43.                 axisTick: {            // 坐标轴小标记  
    44.                     length: 15,        // 属性length控制线长  
    45.                     lineStyle: {       // 属性lineStyle控制线条样式  
    46.                         color: 'auto'  
    47.                     }  
    48.                 },  
    49.                 splitLine: {           // 分隔线  
    50.                     length: 20,         // 属性length控制线长  
    51.                     lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式  
    52.                         color: 'auto'  
    53.                     }  
    54.                 },  
    55.                 title : {  
    56.                     textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
    57.                         fontWeight: 'bolder',  
    58.                         fontSize: 20,  
    59.                         fontStyle: 'italic',  
    60.                         color:"#25c36c"  
    61.                     }  
    62.                 },  
    63.                 detail : {  
    64.                     textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
    65.                         fontWeight: 'bolder'  
    66.                     }  
    67.                 },  
    68.                 data:[{value: 109.2, textStyle:{color:"#25c36c"}, name: '  东部地区  用水量'}]  
    69.             },  
    70.             {  
    71.                 name: '下降',  
    72.                 type: 'gauge',  
    73.                 center : ['50%', '65%'],    // 默认全局居中  
    74.                 radius : '25%',  
    75.                 min: 0,  
    76.                 max: 2,  
    77.                 startAngle: 315,  
    78.                 endAngle: 225,  
    79.                 splitNumber: 2,  
    80.                 axisLine: {            // 坐标轴线  
    81.                     lineStyle: {       // 属性lineStyle控制线条样式  
    82.                          8  
    83.                     }  
    84.                 },  
    85.                 axisTick: {            // 坐标轴小标记  
    86.                     show: false  
    87.                 },  
    88.                 axisLabel: {  
    89.                     formatter:function(v){  
    90.                         switch (v + '') {  
    91.                             case '0' : return '0';  
    92.                             case '1' : return '下降';  
    93.                             case '2' : return '1.5%';  
    94.                         }  
    95.                     }  
    96.                 },  
    97.                 splitLine: {           // 分隔线  
    98.                     length: 15,         // 属性length控制线长  
    99.                     lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式  
    100.                         color: 'auto'  
    101.                     }  
    102.                 },  
    103.                 pointer: {  
    104.                     2  
    105.                 },  
    106.                 title: {  
    107.                     show: false  
    108.                 },  
    109.                 detail: {  
    110.                     show: false  
    111.                 },  
    112.                 data:[{value: 2, name: '下降'}]  
    113.             },  
    114.               
    115.             {  
    116.                 name: '中部地区',  
    117.                 type: 'gauge',  
    118.                 center: ['20%', '55%'],    // 默认全局居中  
    119.                 radius: '35%',  
    120.                 min:0,  
    121.                 max:72,  
    122.                 endAngle:45,  
    123.                 splitNumber:8,  
    124.                 axisLine: {            // 坐标轴线  
    125.                     lineStyle: {       // 属性lineStyle控制线条样式  
    126.                          8  
    127.                     }  
    128.                 },  
    129.                 axisTick: {            // 坐标轴小标记  
    130.                     length:12,        // 属性length控制线长  
    131.                     lineStyle: {       // 属性lineStyle控制线条样式  
    132.                         color: 'auto'  
    133.                     }  
    134.                 },  
    135.                 splitLine: {           // 分隔线  
    136.                     length:20,         // 属性length控制线长  
    137.                     lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式  
    138.                         color: 'auto'  
    139.                     }  
    140.                 },  
    141.                 pointer: {  
    142.                     5  
    143.                 },  
    144.                 title: {  
    145.                     offsetCenter: [0, '-30%'],       // x, y，单位px  
    146.                 },  
    147.                 detail: {  
    148.                     textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
    149.                         fontWeight: 'bolder'  
    150.                     }  
    151.                 },  
    152.                 data:[{value: 48.2, name: '     中部地区ddd',textStyle:{color:"#ffff00"}  }]  
    153.             },  
    154.             {  
    155.                 name: '下降',  
    156.                 type: 'gauge',  
    157.                 center : ['20%', '62%'],    // 默认全局居中  
    158.                 radius : '25%',  
    159.                 min: 0,  
    160.                 max: 2,  
    161.                 startAngle: 315,  
    162.                 endAngle: 225,  
    163.                 splitNumber: 2,  
    164.                 axisLine: {            // 坐标轴线  
    165.                     lineStyle: {       // 属性lineStyle控制线条样式  
    166.                          8  
    167.                     }  
    168.                 },  
    169.                 axisTick: {            // 坐标轴小标记  
    170.                     show: false  
    171.                 },  
    172.                 axisLabel: {  
    173.                     formatter:function(v){  
    174.                         switch (v + '') {  
    175.                             case '0' : return '0';  
    176.                             case '1' : return '下降';  
    177.                             case '2' : return '2.1%';  
    178.                         }  
    179.                     }  
    180.                 },  
    181.                 splitLine: {           // 分隔线  
    182.                     length: 15,         // 属性length控制线长  
    183.                     lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式  
    184.                         color: 'auto'  
    185.                     }  
    186.                 },  
    187.                 pointer: {  
    188.                     2  
    189.                 },  
    190.                 title: {  
    191.                     show: false  
    192.                 },  
    193.                 detail: {  
    194.                     show: false  
    195.                 },  
    196.                 data:[{value: 2, name: '下降'}]  
    197.             },  
    198.               
    199.               
    200.            {  
    201.                 name: '西部地区',  
    202.                 type: 'gauge',  
    203.                 center: ['85%', '55%'],    // 默认全局居中  
    204.                 radius: '35%',  
    205.                 min:0,  
    206.                 max:72,  
    207.                 endAngle:45,  
    208.                 splitNumber:8,  
    209.                 axisLine: {            // 坐标轴线  
    210.                     lineStyle: {       // 属性lineStyle控制线条样式  
    211.                          8  
    212.                     }  
    213.                 },  
    214.                 axisTick: {            // 坐标轴小标记  
    215.                     length:12,        // 属性length控制线长  
    216.                     lineStyle: {       // 属性lineStyle控制线条样式  
    217.                         color: 'auto'  
    218.                     }  
    219.                 },  
    220.                 splitLine: {           // 分隔线  
    221.                     length:20,         // 属性length控制线长  
    222.                     lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式  
    223.                         color: 'auto'  
    224.                     }  
    225.                 },  
    226.                 pointer: {  
    227.                     5  
    228.                 },  
    229.                 title: {  
    230.                     offsetCenter: [0, '-30%'],       // x, y，单位px  
    231.                 },  
    232.                 detail: {  
    233.                     textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
    234.                         fontWeight: 'bolder'  
    235.                     }  
    236.                 },  
    237.                 data:[{value: 41, name: '        西部地区  用水量',   
    238.                 textStyle:{color:"#ffff00"} }]  
    239.             },  
    240.             {  
    241.                 name: '下降',  
    242.                 type: 'gauge',  
    243.                 center : ['85%', '62%'],    // 默认全局居中  
    244.                 radius : '25%',  
    245.                 min: 0,  
    246.                 max: 2,  
    247.                 startAngle: 315,  
    248.                 endAngle: 225,  
    249.                 splitNumber: 2,  
    250.                 axisLine: {            // 坐标轴线  
    251.                     lineStyle: {       // 属性lineStyle控制线条样式  
    252.                          8  
    253.                     }  
    254.                 },  
    255.                 axisTick: {            // 坐标轴小标记  
    256.                     show: false  
    257.                 },  
    258.                 axisLabel: {  
    259.                     formatter:function(v){  
    260.                         switch (v + '') {  
    261.                             case '0' : return '0';  
    262.                             case '1' : return '下降';  
    263.                             case '2' : return '2.5%';  
    264.                         }  
    265.                     }  
    266.                 },  
    267.                 splitLine: {           // 分隔线  
    268.                     length: 15,         // 属性length控制线长  
    269.                     lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式  
    270.                         color: 'auto'  
    271.                     }  
    272.                 },  
    273.                 pointer: {  
    274.                     2  
    275.                 },  
    276.                 title: {  
    277.                     show: false  
    278.                 },  
    279.                 detail: {  
    280.                     show: false  
    281.                 },  
    282.                 data:[{value: 2, name: '下降'}]  
    283.             }  
    284.         ]  
    285.     };  
    286.   
    287.     /*  
    288.     app.timeTicket = setInterval(function (){  
    289.         myChart.setOption(option,true);  
    290.     },2000);  
    291.     */  
    292.   
    293.     myChart.setOption(option);  
    294.     </script>  
    295.   
    296. </body>  
    297. </html>  

            修改核心代码：

    [html] view plain copy
    1. title : {  
    2.     textStyle: {         
    3.             // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
    4.             fontWeight: 'bolder',  
    5.             fontSize: 20,  
    6.             color:"#7FFFD4"  
    7.         }  
    8.     },  
    9.     detail : {  
    10.             textStyle: {         
    11.             // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
    12.             fontWeight: 'bolder'   
    13.         }  
    14.     },  
    15.     data: {  
    16.         value: 109.2,  
    17.         name: '   东部地区  用水量'}]  
    18.     },  

            核心代码如下所示：





    7.柱状图文本鼠标浮动上的颜色设置

            需要修改的内容如下图所示：

            代码如下所示：

    [html] view plain copy
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta charset="utf-8">  
    5.     <title>ECharts</title>  
    6.     <script src="echarts.min.js"></script>  
    7. </head>  
    8. <body>  
    9.     <div id="main" style=" 600px;height:400px;"></div>  
    10.     <script type="text/javascript">  
    11.  var myChart = echarts.init(document.getElementById('main'));  
    12.      var labelRight = {  
    13.     normal: {  
    14.         position: 'right'  
    15.     }  
    16. };  
    17.  var labelRight = {  
    18.     normal: {  
    19.         position: 'right'  
    20.     }  
    21. };  
    22.  var option = {  
    23.     title: {  
    24.           
    25.         text: '                                         十大高耗水行业用水量八减两增 ',  
    26.        subtext: '同比百分比(%)',  
    27.     },  
    28.     tooltip : {  
    29.         trigger: 'axis',  
    30.         axisPointer : {            // 坐标轴指示器，坐标轴触发有效  
    31.             type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'  
    32.         }  
    33.     },  
    34.     grid: {  
    35.         top: 80,  
    36.         bottom: 80  
    37.     },  
    38.     xAxis: {  
    39.         type : 'value',  
    40.         position: 'top',  
    41.         splitLine: {lineStyle:{type:'dashed'}},  
    42.         max:'4',  
    43.     },  
    44.     yAxis: {  
    45.         type : 'category',  
    46.         axisLine: {show: false},  
    47.         axisLabel: {show: false},  
    48.         axisTick: {show: false},  
    49.         splitLine: {show: false},  
    50.         data : ['石油加工、炼焦和核燃料加工业' , '非金属矿物制品业',   
    51.         '化学原料和化学制品制造业', '有色金属冶炼和压延加工业', '造纸和纸制品业', '纺织业',  
    52.         '电力、热力生产和供应业', '非金属矿采选业', '黑色金属冶炼和压延加工业', '煤炭开采和洗选业']  
    53.     },  
    54.     series : [  
    55.         {  
    56.             name:'幅度 ',  
    57.             type:'bar',  
    58.             stack: '总量',  
    59.             label: {  
    60.                 normal: {  
    61.                     show: true,  
    62.                     formatter: '{b}'  
    63.                 }  
    64.             },  
    65.             data:[  
    66.                  {value: 0.2, label: labelRight, itemStyle:{ normal:{color:'gray'} } },  
    67.                 {value: 0.7, label: labelRight},  
    68.                 {value: -1.1, label: labelRight},  
    69.                 {value: -1.3, label: labelRight},  
    70.                 {value: -1.9, label: labelRight,   
    71.                     itemStyle:{    
    72.                         normal: {  
    73.                             color:'#28c6de',  
    74.                             label: {textStyle:{color:'#00ff00'}}  
    75.                         }   
    76.                     }   
    77.                 },  
    78.                 {value: -2.9, label: labelRight},  
    79.                 {value: -3.0, label: labelRight},   
    80.                 {value: -4.2, label: labelRight},  
    81.                 {value: -4.9, label: labelRight},   
    82.                 {value: -5.8, label: labelRight},  
    83.             ]  
    84.         }  
    85.     ]  
    86. };  
    87.   
    88.   
    89. myChart.setOption(option);  
    90.     </script>  
    91. </body>  
    92. </html>  

            核心代码：

    [html] view plain copy
    1. data:[  
    2.     {value: 0.2, label: labelRight, itemStyle:{ normal:{color:'gray'} } },  
    3.     {value: 0.7, label: labelRight},  
    4.     {value: -1.1, label: labelRight},  
    5.     {value: -1.3, label: labelRight},  
    6.     {value: -1.9, label: labelRight,   
    7.         itemStyle:{    
    8.             normal: {  
    9.                 color:'#28c6de',  
    10.                 label: {textStyle:{color:'#00ff00'}}  
    11.             }   
    12.         }   
    13.     },  
    14.     {value: -2.9, label: labelRight},  
    15.     {value: -3.0, label: labelRight},   
    16.     {value: -4.2, label: labelRight},  
    17.     {value: -4.9, label: labelRight},   
    18.     {value: -5.8, label: labelRight},  
    19. ]  

            输出结果：




            自适应大小，添加如下代码：

    [html] view plain copy
    1. // 为echarts对象加载数据  
    2. myChart.setOption(option);  
    3. // 加上这一句即可  
    4. window.onresize = myChart.resize;  

            或者：

    [html] view plain copy
    1. window.addEventListener("resize",function(){                
    2.         option.chart.resize();  
    3. });  


    如果能帮到你，打赏我吧~
  • 相关阅读:
    【后端】Python学习笔记
    【学习】JennyHui学英语
    【学习】JennyHui学英语
    【英语】Bingo口语笔记(3)
    LoadRunner目录分析
    性能测试常见用语
    [转]黑盒测试用例设计方法
    RUP
    软件质量管理杂谈
    关于BUG
  • 原文地址：https://www.cnblogs.com/qingqinglanlan/p/8334958.html
Copyright © 2011-2022 走看看