码上快乐

相关内容   简体   繁体

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

本文转载自  查看原文  2018-01-23 11:45  9778 

这篇文章主要讲述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="width: 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="width: 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="width: 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.                         width:2  
  58.                     }  
  59.                 },  
  60.             },  
  61.    
  62.             yAxis: {  
  63.                 type: 'category',  
  64.                 //设置坐标轴字体颜色和宽度  
  65.                 axisLine:{  
  66.                     lineStyle:{  
  67.                         color:'yellow',  
  68.                         width: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.               width: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="width: 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="width: 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.                         width: 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: '  东部地区\n 用水量'}]  
  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.                         width: 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.                     width: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.                         width: 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.                     width: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.                         width: 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.                     width: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.                         width: 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.                     width: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: '        西部地区\n 用水量',   
  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.                         width: 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.                     width: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: '\n\n  东部地区\n 用水量'}]  
  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="width: 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. });  


如果能帮到你，打赏我吧~


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 echarts设置线条粗细 Matplotlib 线条颜色设置 pywinauto操作笔记 echarts-设置折线图中折线线条颜色和折线点颜色 echarts折线图颜色-折线图颜色设置-线条设置颜色-附代码案例（2019全） 设置IDEA中各种线条颜色 Emgucv 图像操作笔记 jquery基本操作笔记 echarts修改线条颜色的方法 echarts各种字体颜色的修改
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM