devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【微信小程序】使用ECharts图表绘制环形图、柱状图、雷达图_微信小程序 柱状图

作者：笔触狂放9 | 2024-07-15 17:33:55

赞

踩

微信小程序 柱状图

小程序中使用echarts

官网中介绍到：echarts-for-weixin 项目提供了一个小程序组件，用这种方式可以方便地使用 ECharts。

echarts.js文件很大，如果包空间不够的话可以官网定制ECharts 在线构建

接下来就开始往你的小程序里面植入了。你可以自己新建一个components，把echarts这个目录放进去，原目录中的echarts.js删了不要,太大了,换成上一步下载的echarts.min.js，还有一点注意的就是ec-canvas.js的import引入的是原来的echarts.js文件，你需要自己改成刚才下载的文件

页面使用echarts

<ec-canvas id="depTypeChart" ec="{{chartObj}}"></ec-canvas>
  1. import * as echarts from '../../../../../utils/ec-canvas/echarts';//引入图表
  2.  
  3.  
  4.  
  5. //图表:延迟加载
  6. chartObj: {lazyLoad: true},

环形图

效果图

  1. /**
  2.           图表
  3.         **/
  4.         var option = chart_util.chartUtil('pie');
  5.         //设置颜色
  6. 	    option.color= ['#344EFF', '#93F1D3','#FA7B4B','#9FE080'];
  7.         option.legend.data = ['高层','中层','基层']; 
  8.         option.series[0].data = [{name: "高层", value: "151749.86"}, {name: "中层",value: "375527.67"}, {name: "基层", value: "471755.13"}]; 
  9.         //图例位置
  10.         option.legend.top = "75%";  
  11.         option.series[0].label= {
  12.           normal: {
  13.                //设置文字样式
  14.               formatter: "{a|} \n {b} \n{hr|}\n {d}% \n {c}元",
  15.               show: true,
  16.               position: 'right',
  17.               rich: {
  18.                   a: {
  19.                       padding: [0, -80, -15, -80]
  20.                   },
  21.                   hr: {
  22.                       height: 5,
  23.                       width: 5,
  24.                       backgroundColor: 't',
  25.                       lineHeight: 5,
  26.                       marginBottom: 10,
  27.                       padding: [0, -5],
  28.                       borderRadius: 5,
  29.                   }
  30.               },
  31.           },
  32.         }
  33.         //图表
  34.         option.series[0].avoidLabelOverlap = true;
  35.         var chartComponnet = that.selectComponent('#depTypeChart');
  36.         that.drawChart(option, chartComponnet);
  1.   //绘图
  2.   drawChart(option, chartComponnet) {
  3.     //console.log('option==>', option);
  4.     var that = this;
  5.     const getPixelRatio = () => {
  6.       let pixelRatio = 0
  7.       wx.getSystemInfo({
  8.           success: function (res) {
  9.               pixelRatio = res.pixelRatio
  10.           },
  11.           fail: function () {
  12.               pixelRatio = 0
  13.           }
  14.       })
  15.       return pixelRatio
  16.     }
  17.     var dpr = getPixelRatio()
  18.     // 上述代码是wx获取设备的像素值 dpr
  19.     
  20.     if (chartComponnet) {
  21.       chartComponnet.init((canvas, width, height) => {
  22.         const chart = echarts.init(canvas, null, {
  23.           width: width,
  24.           height: height,
  25.           devicePixelRatio: dpr   // 获取到的像素值赋值给devicePixelRatio， 在echarts中必写
  26.         }); 
  27.         chart.setOption(option, true);
  28.         return chart;
  29.       });
  30.     }
  31.   },

柱状图

效果图

  1. var option = chart_util.chartUtil('bar');
  2. option = {
  3.             xAxis: {
  4.                 type: 'category',
  5.                 data: ["行政管理得分", "后勤服务满意度得分"],
  6.                 axisLabel:{
  7.                   interval:0,
  8.                   // x轴文本换行
  9.                   formatter: function (params) {
  10.                     var newParamsName = '' // 最终拼接成的字符串
  11.                     var paramsNameNumber = params.length // 实际标签的个数
  12.                     var provideNumber = 5 // 每行能显示的字的个数
  13.                     var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
  14.                     // 条件等同于rowNumber>1
  15.                     if (paramsNameNumber > provideNumber) {
  16.                       // 循环每一行,p表示行
  17.                       for (var p = 0; p < rowNumber; p++) {
  18.                         var tempStr = "" // 表示每一次截取的字符串
  19.                         var start = p * provideNumber // 开始截取的位置
  20.                         var end = start + provideNumber // 结束截取的位置
  21.                         // 此处特殊处理最后一行的索引值
  22.                         if (p == rowNumber - 1) tempStr = params.substring(start, paramsNameNumber)
  23.                         else tempStr = params.substring(start, end) + "\n" // 每一次拼接字符串并换行
  24.                         newParamsName += tempStr // 最终拼成的字符串
  25.                       }
  26.                     } else {
  27.                       newParamsName = params // 将旧标签的值赋给新标签
  28.                     }
  29.                     return newParamsName
  30.                   }
  31.                 }
  32.             },
  33.             yAxis: {
  34.                 type: 'value'
  35.             },
  36.             series: [
  37.                 {
  38.               name: '目标值',
  39.               type: 'bar',
  40.               label:{
  41.                 show: true, 
  42.                 position: 'top',
  43.                 formatter: (value,index)=> { 
  44.                   return value?.value;
  45.                 }
  46.               },
  47.               itemStyle: {
  48.                 normal: {
  49.                     borderWidth: 1,
  50.                     color: { type: 'linear', x: 1, y: 0, x2: 0,  y2: 1,
  51.                         colorStops: [{
  52.                             offset: 0,
  53.                             color: '#3476FF' // 0% 处的颜色
  54.                         }, {
  55.                             offset: 1,
  56.                             color: '#34DFFF' // 100% 处的颜色
  57.                         }],
  58.                         globalCoord: true, // 缺省为 false
  59.                     },
  60.                     barBorderRadius: [20, 20, 0, 0],
  61.                     label: {
  62.                         show: true, //设置是否显示数值
  63.                         position: 'top',
  64.                         textStyle: {
  65.                             color: '#222222'
  66.                         },
  67.                         formatter: function (params) {
  68.                             if (params.value == 0) {
  69.                                 return '';
  70.                             } else {
  71.                                 return params.value;
  72.                             }
  73.                         }
  74.                     },
  75.                 },
  76.               },
  77.               data: [85, 85]
  78.             },
  79.             {
  80.               name: '实际值',
  81.               type: 'bar',
  82.               label:{
  83.                 show: true, 
  84.                 position: 'top',
  85.                 formatter: (value,index)=> { 
  86.                   return value?.value;
  87.                 }
  88.               },
  89.               itemStyle: {
  90.                 normal: {
  91.                     borderWidth: 1,
  92.                     color: { type: 'linear', x: 1, y: 0, x2: 0,  y2: 1,
  93.                         colorStops: [{
  94.                             offset: 0,
  95.                             color: '#9FE080' // 0% 处的颜色
  96.                         }, {
  97.                             offset: 1,
  98.                             color: '#CFEFBF' // 100% 处的颜色
  99.                         }],
  100.                         globalCoord: true, // 缺省为 false
  101.                     },
  102.                     barBorderRadius: [20, 20, 0, 0],
  103.                     label: {
  104.                         show: true, //设置是否显示数值
  105.                         position: 'top',
  106.                         textStyle: {
  107.                             color: '#222222'
  108.                         },
  109.                         formatter: function (params) {
  110.                             if (params.value == 0) {
  111.                                 return '';
  112.                             } else {
  113.                                 return params.value;
  114.                             }
  115.                         }
  116.                     },
  117.                 },
  118.               },
  119.               data: [90, 91.57]
  120.             },
  121.             {
  122.               name: '权重',
  123.               type: 'bar',
  124.               label:{
  125.                 show: true, 
  126.                 position: 'top',
  127.                 formatter: (value,index)=> { 
  128.                   return value?.value;
  129.                 }
  130.               },
  131.               itemStyle: {
  132.                 normal: {
  133.                     borderWidth: 1,
  134.                     color: { type: 'linear', x: 1, y: 0, x2: 0,  y2: 1,
  135.                         colorStops: [{
  136.                             offset: 0,
  137.                             color: '#93F1D3' // 0% 处的颜色
  138.                         }, {
  139.                             offset: 1,
  140.                             color: '#C9F8E9' // 100% 处的颜色
  141.                         }],
  142.                         globalCoord: true, // 缺省为 false
  143.                     },
  144.                     barBorderRadius: [20, 20, 0, 0],
  145.                     label: {
  146.                         show: true, //设置是否显示数值
  147.                         position: 'top',
  148.                         textStyle: {
  149.                             color: '#222222'
  150.                         },
  151.                         formatter: function (params) {
  152.                             if (params.value == 0) {
  153.                                 return '';
  154.                             } else {
  155.                                 return params.value;
  156.                             }
  157.                         }
  158.                     },
  159.                 },
  160.               },
  161.               data: [60, 40]
  162.             },
  163.             ],
  164.             grid:{
  165.               x: 40, //距离左边
  166.               x2: 20, //距离右边
  167.               y:30, //距离上边
  168.               y2:100,//距离下边
  169.             },
  170.             legend: {
  171.               data: ['目标值','实际值','权重'],
  172.               bottom:40
  173.             },
  174.            var chartComponnet = that.selectComponent('#axDepChart');
  175.            that.drawChart(option, chartComponnet);//方法同环形图

雷达图

效果图

  1. that.echartsComponnetdep = that.selectComponent('#chart_depScore');
  2. var option = {
  3.         color: ["#338bfd", "#fe2e42"],
  4.         legend: {
  5.           bottom: "1%",
  6.           itemWidth: 20,
  7.           itemHeight: 12,
  8.           data:['他评得分','自评得分']
  9.         },
  10.         textStyle: { // 图例的公用文本样式。
  11.           fontSize: 12,
  12.           color: '#102552',
  13.           fontFamily: "PingFangSC-Regular, PingFang SC",
  14.         },
  15.         name: {
  16.           //纬度标题5字换行
  17.           formatter: function (value) {
  18.             let list = value.split("");
  19.             let result = "";
  20.             for (let i = 1; i <= list.length; i++) {
  21.               if (!(i % 4) && list[i] != undefined) {
  22.                   result += list[i - 1] + '\n';
  23.               } else {
  24.                   result += list[i - 1];
  25.               }
  26.             }
  27.             return result;
  28.           },
  29.         },
  30.         radar: {
  31.           indicator: [{name: "职业素养", max: 5},{name: "沟通交流", max: 5},{name: "执行力", max: 5},{name: "团队协作", max: 5},{name: "竞争意识", max: 5},{name: "学习创新", max: 5},{name: "战略规划能力", max: 15},{name: "领导力素质", max: 15},{name: "组织管理能力", max: 10},{name: "计划部署能力", max: 15}, {name: "经营管理能力", max: 15}
  32.           ],
  33.           center: ['50%', '50%'],
  34.           radius: 100,
  35.           splitNumber: 4,
  36.           shape: 'circle',
  37.           splitArea: {
  38.             areaStyle: {
  39.               color: ['rgba(236,233,255,0.3)', 'rgba(250,239,235,0.3)', 'rgba(250,239,235,0.1)']
  40.             }
  41.           },
  42.         },
  43.         series: [
  44.           {
  45.             type: 'radar',
  46.             data: [
  47.               {
  48.                 name:'他评得分',
  49.                 value: [4, 4, 5, 4, 5, 4, 14, 15, 9, 14, 15],
  50.                 lineStyle: {
  51.                   type: 'dashed',
  52.                   color: '#3476ff',
  53.                   opacity: '0.3',
  54.                   width: 1
  55.                 },
  56.                 areaStyle: {
  57.                   opacity: 0.1
  58.                 },
  59.                 label: {
  60.                   normal: {
  61.                     alignTo: 'labelLine',
  62.                     textStyle: {
  63.                       color: '#588dfb',
  64.                       fontSize: 13,
  65.                       fontWeight: 'bolder'
  66.                     },
  67.                     padding: -5,
  68.                   }
  69.                 },
  70.               },
  71.               {
  72.                 name:'自评得分',
  73.                 value:  [3, 4, 0, 4, 3, 5, 13, 14, 10, 15, 15],
  74.                 lineStyle: {
  75.                   type: 'dashed',
  76.                   color: '#3476ff',
  77.                   opacity: '0.3',
  78.                   width: 1
  79.                 },
  80.                 areaStyle: {
  81.                   opacity: 0.1
  82.                 },
  83.                 label: {
  84.                   normal: {
  85.                     alignTo: 'labelLine',
  86.                     textStyle: {
  87.                       color: '#588dfb',
  88.                       fontSize: 13,
  89.                       fontWeight: 'bolder'
  90.                     },
  91.                     padding: -5,
  92.                   }
  93.                 },
  94.               }
  95.             ]
  96.           }
  97.         ],
  98.       };
  99.       that.drawChart(option,that.echartsComponnetdep);//方法同上

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/830427
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号