当前位置：Gxlcms > JavaScript > 常用的echarts图表的实现代码

常用的echarts图表的实现代码

时间：2021-07-01 10:21:17 帮助过：8人阅读

本篇文章给大家带来的内容是关于常用的echarts图表的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

本文代码基于ehcarts4.0开发

饼图

3156658585-5baf10615631b_articlex.png

  1. // 饼图配置项
  2.     var option = {
  3.         series: [
  4.             {
  5.                 name:'风险预警占比',
  6.                 type: 'pie',
  7.                 radius: ['25%', '40%'],
  8.                 center: ['50%', '50%'],
  9.                 roseType: false,
  10.                 data: [
  11.                     {
  12.                         value: 40,
  13.                         name: '红色预警'
  14.                     }, {
  15.                         value: 30,
  16.                         name: '橙色预警'
  17.                     }, {
  18.                         value: 10,
  19.                         name: '黄色预警'
  20.                     }, {
  21.                         value: 50,
  22.                         name: '蓝色预警'
  23.                     }
  24.                 ],
  25.                 label: {
  26.                     fontSize: 12,
  27.                     color:'#545454',
  28.                     formatter: function (param) {
  29.                         return param.name + '(' + Math.round(param.percent) + '%' + ')' 
  30.                             + '\n' + param.value +  '个';
  31.                     }
  32.                 },
  33.                 labelLine: {
  34.                     smooth: false,
  35.                     lineStyle: {
  36.                         width: 2
  37.                     }
  38.                 },
  39.                 itemStyle: {
  40.                     color:function(params){
  41.                         switch (params.name) {
  42.                             case '红色预警':
  43.                                 return '#D70002';
  44.                             case '橙色预警':
  45.                                 return '#FF9309';
  46.                             case '黄色预警':
  47.                                 return '#FFFB09';
  48.                             case '蓝色预警':
  49.                                 return '#035EF7';
  50.                             default:
  51.                                 break;
  52.                         }
  53.                     }
  54.                 },
  55.             }
  56.         ]
  57.     }

堆叠柱状图

760458630-5baf107b5365c_articlex.png

  1. //堆叠柱状图配置项
  2.   var option = {
  3.       backgroundColor: '#fff',
  4.       tooltip: {
  5.           trigger: 'axis',
  6.           axisPointer: {
  7.               type: 'shadow'
  8.           }
  9.       },
  10.       legend: {
  11.           bottom: '10',
  12.           itemGap: 30,
  13.           data: ['一级', '二级', '三级', '四级']
  14.       },
  15.       grid: { //图表的位置
  16.           top: 30,
  17.           left: 10,
  18.           right: 80,
  19.           bottom: 60,
  20.           containLabel: true
  21.       },
  22.       dataZoom: [
  23.           {
  24.               type: 'inside'
  25.           }, {
  26.               type: 'slider',
  27.               start: 0,
  28.               bottom: 40,
  29.               height: '15px',
  30.               fillerColor:'rgba(202,223,255,.8)',
  31.               borderColor:'#b6d2fc',
  32.               handleStyle:{
  33.                   color:'#b6d2fc'
  34.               },
  35.               dataBackground:{
  36.                   lineStyle:{
  37.                       color:'#b6d2fc'
  38.                   },
  39.                   areaStyle:{
  40.                       color:'rgba(202,223,255,.8)'
  41.                   }
  42.               }
  43.           }
  44.       ],
  45.       yAxis: [
  46.           {
  47.               type: 'value',
  48.               name: '备案个数',
  49.               nameTextStyle: {
  50.                   fontSize: 12,
  51.                   fontWeight: 'bold',
  52.                   color: '#454545'
  53.               },
  54.               splitLine: {
  55.                   show: false
  56.               },
  57.               axisLine: {
  58.                   lineStyle: {
  59.                       color: '#B3B3B3'
  60.                   }
  61.               },
  62.               axisLabel: {
  63.                   color: '#454545'
  64.               }
  65.           }
  66.       ],
  67.       xAxis: [
  68.           {
  69.               type: 'category',
  70.               name: '区县名称',
  71.               nameTextStyle: {
  72.                   fontSize: 12,
  73.                   fontWeight: 'bold',
  74.                   color: '#454545'
  75.               },
  76.               axisLine: {
  77.                   lineStyle: {
  78.                       color: '#B3B3B3'
  79.                   }
  80.               },
  81.               axisLabel: {
  82.                   color: '#454545'
  83.               },
  84.               data: ['鼓楼区','玄武区','秦淮区']
  85.           }
  86.       ],
  87.       series: [
  88.           {
  89.               name: '一级',
  90.               type: 'bar',
  91.               stack: '总量',
  92.               barWidth: '10px',
  93.               itemStyle:{
  94.                   color:'#D70002'
  95.               },
  96.               data: [2,4,6]
  97.           },
  98.           {
  99.               name: '二级',
  100.               type: 'bar',
  101.               stack: '总量',
  102.               barWidth: '10px',
  103.               data: [2,4,1]
  104.           },
  105.           {
  106.               name: '三级',
  107.               type: 'bar',
  108.               stack: '总量',
  109.               barWidth: '10px',
  110.               itemStyle:{
  111.                   color:'#FFFB09'
  112.               },
  113.               data: [1,5,7]
  114.           },
  115.           {
  116.               name: '四级',
  117.               type: 'bar',
  118.               stack: '总量',
  119.               barWidth: '10px',
  120.               itemStyle:{
  121.                   color:'#FF9309'
  122.               },
  123.               data: [1]
  124.           }
  125.       ]
  126.     }

渐变柱状图

3955158186-5baf108a76e29_articlex.png

  1. //配置项
  2. var option = {
  3.       backgroundColor: '#fff',
  4.       color: [
  5.           new echarts.graphic.LinearGradient(
  6.               0, 0, 0, 1,
  7.               [
  8.                   { offset: 0, color: '#23E9EE' },
  9.                   { offset: 1, color: '#0460F7' }
  10.               ]
  11.           )
  12.       ],
  13.       tooltip: {
  14.           trigger: 'axis',
  15.           axisPointer: {
  16.               type: 'shadow'
  17.           }
  18.       },
  19.       legend: {
  20.           bottom: '10',
  21.           itemGap: 30,
  22.           data: ['一级', '二级', '三级', '四级']
  23.       },
  24.       grid: { //图表的位置
  25.           top: 30,
  26.           left: 10,
  27.           right: 80,
  28.           bottom: 60,
  29.           containLabel: true
  30.       },
  31.       dataZoom: [
  32.           {
  33.               type: 'inside'
  34.           }, {
  35.               type: 'slider',
  36.               start: 0,
  37.               bottom: 40,
  38.               height: '15px',
  39.               fillerColor:'rgba(202,223,255,.8)',
  40.               borderColor:'#b6d2fc',
  41.               handleStyle:{
  42.                   color:'#b6d2fc'
  43.               },
  44.               dataBackground:{
  45.                   lineStyle:{
  46.                       color:'#b6d2fc'
  47.                   },
  48.                   areaStyle:{
  49.                       color:'rgba(202,223,255,.8)'
  50.                   }
  51.               }
  52.           }
  53.       ],
  54.       yAxis: [
  55.           {
  56.               type: 'value',
  57.               name: '备案个数',
  58.               nameTextStyle: {
  59.                   fontSize: 12,
  60.                   fontWeight: 'bold',
  61.                   color: '#454545'
  62.               },
  63.               splitLine: {
  64.                   show: false
  65.               },
  66.               axisLine: {
  67.                   lineStyle: {
  68.                       color: '#B3B3B3'
  69.                   }
  70.               },
  71.               axisLabel: {
  72.                   color: '#454545'
  73.               }
  74.           }
  75.       ],
  76.       xAxis: [
  77.           {
  78.               type: 'category',
  79.               name: '区县名称',
  80.               nameTextStyle: {
  81.                   fontSize: 12,
  82.                   fontWeight: 'bold',
  83.                   color: '#454545'
  84.               },
  85.               axisLine: {
  86.                   lineStyle: {
  87.                       color: '#B3B3B3'
  88.                   }
  89.               },
  90.               axisLabel: {
  91.                   color: '#454545'
  92.               },
  93.               data: ['鼓楼区','玄武区','秦淮区']
  94.           }
  95.       ],
  96.       series: [
  97.           {
  98.               name: '报警',
  99.               type: 'bar',
  100.               stack: '总量',
  101.               barWidth: '10px',
  102.               data: [1,2,4]
  103.           }
  104.       ]
  105.   };

线图

93048164-5baf10951d5c5_articlex.png

  1. //线图配置项
  2. var option = {
  3.       tooltip: {
  4.           trigger: 'axis'
  5.       },
  6.       color: [
  7.           new echarts.graphic.LinearGradient(
  8.               0, 0, 0, 1,
  9.               [
  10.                   {offset: 0, color: '#23E9EE'},
  11.                   {offset: 1, color: '#0460F7'}
  12.               ]
  13.           )
  14.       ],
  15.       grid: {
  16.           top: 30,
  17.           left: 10,
  18.           right: 30,
  19.           bottom: 50,
  20.           containLabel: true
  21.       },
  22.       dataZoom: [
  23.           {
  24.               type: 'inside'
  25.           }, {
  26.               type: 'slider',
  27.               start: 0,
  28.               bottom: 30,
  29.               height: '15px',
  30.               fillerColor:'rgba(202,223,255,.8)',
  31.               borderColor:'#b6d2fc',
  32.               handleStyle:{
  33.                   color:'#b6d2fc'
  34.               },
  35.               dataBackground:{
  36.                   lineStyle:{
  37.                       color:'#b6d2fc'
  38.                   },
  39.                   areaStyle:{
  40.                       color:'rgba(202,223,255,.8)'
  41.                   }
  42.               }
  43.           }
  44.       ],
  45.       yAxis: [
  46.           {
  47.               type: 'value',
  48.               splitLine: {
  49.                   show: false
  50.               },
  51.               axisLine: {
  52.                   lineStyle: {
  53.                       color: '#B3B3B3'
  54.                   }
  55.               },
  56.               axisLabel: {
  57.                   color: '#454545'
  58.               }
  59.           }
  60.       ],
  61.       xAxis: {
  62.           type: 'category',
  63.           boundaryGap:false,
  64.           axisLine: {
  65.               lineStyle: {
  66.                   color: '#B3B3B3'
  67.               }
  68.           },
  69.           axisLabel: {
  70.               color: '#454545'
  71.           },
  72.           data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  73.       },
  74.       series: [
  75.           {
  76.               name: '报警个数',
  77.               type: 'line',
  78.               symbol: 'emptyCircle',
  79.               symbolSize: 2,
  80.               showSymbol: false,
  81.               smooth: true,
  82.               areaStyle: {
  83.                   color: new echarts.graphic.LinearGradient(
  84.                       0, 0, 0, 1,
  85.                       [
  86.                           {offset: 0, color: 'rgba(35,233,238,.4)'},
  87.                           {offset: 1, color: 'rgba(4,96,247,.4)'}
  88.                       ]
  89.                   )
  90.               },
  91.               lineStyle: {
  92.                   width: 1,
  93.                   color: '#59cef5'
  94.               },
  95.               itemStyle: {
  96.                   borderColor: '#59cef5',
  97.                   borderWidth: 2
  98.               },
  99.               data:[2,4,3,2,1,4,2]
  100.           }
  101.       ]
  102.   }

创建实例

  1. var chart = echarts.init(document.getElementById('chartBox'));

设置图表实例的配置项

设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表
  1. chart.setOption(option);

以上就是常用的echarts图表的实现代码的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！