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

小程序中使用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>

import * as echarts from '../../../../../utils/ec-canvas/echarts';//引入图表



//图表:延迟加载
chartObj: {lazyLoad: true}, 

环形图

效果图

/**
          图表
        **/
        var option = chart_util.chartUtil('pie');
        //设置颜色
	    option.color= ['#344EFF', '#93F1D3','#FA7B4B','#9FE080'];
        option.legend.data = ['高层','中层','基层']; 
        option.series[0].data = [{name: "高层", value: "151749.86"}, {name: "中层",value: "375527.67"}, {name: "基层", value: "471755.13"}]; 
        //图例位置
        option.legend.top = "75%";  
        option.series[0].label= {
          normal: {
               //设置文字样式
              formatter: "{a|} \n {b} \n{hr|}\n {d}% \n {c}元",
              show: true,
              position: 'right',
              rich: {
                  a: {
                      padding: [0, -80, -15, -80]
                  },
                  hr: {
                      height: 5,
                      width: 5,
                      backgroundColor: 't',
                      lineHeight: 5,
                      marginBottom: 10,
                      padding: [0, -5],
                      borderRadius: 5,
                  }
              },
          },
        }
        //图表
        option.series[0].avoidLabelOverlap = true;
        var chartComponnet = that.selectComponent('#depTypeChart');
        that.drawChart(option, chartComponnet);

  //绘图
  drawChart(option, chartComponnet) {
    //console.log('option==>', option);
    var that = this;
    const getPixelRatio = () => {
      let pixelRatio = 0
      wx.getSystemInfo({
          success: function (res) {
              pixelRatio = res.pixelRatio
          },
          fail: function () {
              pixelRatio = 0
          }
      })
      return pixelRatio
    }
    var dpr = getPixelRatio()
    // 上述代码是wx获取设备的像素值 dpr
    
    if (chartComponnet) {
      chartComponnet.init((canvas, width, height) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr   // 获取到的像素值赋值给devicePixelRatio， 在echarts中必写
        }); 
        chart.setOption(option, true);
        return chart;
      });
    }
  }, 

柱状图

效果图

var option = chart_util.chartUtil('bar');
option = {
            xAxis: {
                type: 'category',
                data: ["行政管理得分", "后勤服务满意度得分"],
                axisLabel:{
                  interval:0,
                  // x轴文本换行
                  formatter: function (params) {
                    var newParamsName = '' // 最终拼接成的字符串
                    var paramsNameNumber = params.length // 实际标签的个数
                    var provideNumber = 5 // 每行能显示的字的个数
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                    // 条件等同于rowNumber>1
                    if (paramsNameNumber > provideNumber) {
                      // 循环每一行,p表示行
                      for (var p = 0; p < rowNumber; p++) {
                        var tempStr = "" // 表示每一次截取的字符串
                        var start = p * provideNumber // 开始截取的位置
                        var end = start + provideNumber // 结束截取的位置
                        // 此处特殊处理最后一行的索引值
                        if (p == rowNumber - 1) tempStr = params.substring(start, paramsNameNumber)
                        else tempStr = params.substring(start, end) + "\n" // 每一次拼接字符串并换行
                        newParamsName += tempStr // 最终拼成的字符串
                      }
                    } else {
                      newParamsName = params // 将旧标签的值赋给新标签
                    }
                    return newParamsName
                  }
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
              name: '目标值',
              type: 'bar',
              label:{
                show: true, 
                position: 'top',
                formatter: (value,index)=> { 
                  return value?.value;
                }
              },
              itemStyle: {
                normal: {
                    borderWidth: 1,
                    color: { type: 'linear', x: 1, y: 0, x2: 0,  y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#3476FF' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#34DFFF' // 100% 处的颜色
                        }],
                        globalCoord: true, // 缺省为 false
                    },
                    barBorderRadius: [20, 20, 0, 0],
                    label: {
                        show: true, //设置是否显示数值
                        position: 'top',
                        textStyle: {
                            color: '#222222'
                        },
                        formatter: function (params) {
                            if (params.value == 0) {
                                return '';
                            } else {
                                return params.value;
                            }
                        }
                    },
                },
              },
              data: [85, 85]
            },
            {
              name: '实际值',
              type: 'bar',
              label:{
                show: true, 
                position: 'top',
                formatter: (value,index)=> { 
                  return value?.value;
                }
              },
              itemStyle: {
                normal: {
                    borderWidth: 1,
                    color: { type: 'linear', x: 1, y: 0, x2: 0,  y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#9FE080' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#CFEFBF' // 100% 处的颜色
                        }],
                        globalCoord: true, // 缺省为 false
                    },
                    barBorderRadius: [20, 20, 0, 0],
                    label: {
                        show: true, //设置是否显示数值
                        position: 'top',
                        textStyle: {
                            color: '#222222'
                        },
                        formatter: function (params) {
                            if (params.value == 0) {
                                return '';
                            } else {
                                return params.value;
                            }
                        }
                    },
                },
              },
              data: [90, 91.57]
            },
            {
              name: '权重',
              type: 'bar',
              label:{
                show: true, 
                position: 'top',
                formatter: (value,index)=> { 
                  return value?.value;
                }
              },
              itemStyle: {
                normal: {
                    borderWidth: 1,
                    color: { type: 'linear', x: 1, y: 0, x2: 0,  y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#93F1D3' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#C9F8E9' // 100% 处的颜色
                        }],
                        globalCoord: true, // 缺省为 false
                    },
                    barBorderRadius: [20, 20, 0, 0],
                    label: {
                        show: true, //设置是否显示数值
                        position: 'top',
                        textStyle: {
                            color: '#222222'
                        },
                        formatter: function (params) {
                            if (params.value == 0) {
                                return '';
                            } else {
                                return params.value;
                            }
                        }
                    },
                },
              },
              data: [60, 40]
            },
            ],
            grid:{
              x: 40, //距离左边
              x2: 20, //距离右边
              y:30, //距离上边
              y2:100,//距离下边
            },
            legend: {
              data: ['目标值','实际值','权重'],
              bottom:40
            },
           var chartComponnet = that.selectComponent('#axDepChart');
           that.drawChart(option, chartComponnet);//方法同环形图

雷达图

效果图

that.echartsComponnetdep = that.selectComponent('#chart_depScore');
var option = {
        color: ["#338bfd", "#fe2e42"],
        legend: {
          bottom: "1%",
          itemWidth: 20,
          itemHeight: 12,
          data:['他评得分','自评得分']
        },
        textStyle: { // 图例的公用文本样式。
          fontSize: 12,
          color: '#102552',
          fontFamily: "PingFangSC-Regular, PingFang SC",
        },
        name: {
          //纬度标题5字换行
          formatter: function (value) {
            let list = value.split("");
            let result = "";
            for (let i = 1; i <= list.length; i++) {
              if (!(i % 4) && list[i] != undefined) {
                  result += list[i - 1] + '\n';
              } else {
                  result += list[i - 1];
              }
            }
            return result;
          },
        },
        radar: {
          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}
          ],
          center: ['50%', '50%'],
          radius: 100,
          splitNumber: 4,
          shape: 'circle',
          splitArea: {
            areaStyle: {
              color: ['rgba(236,233,255,0.3)', 'rgba(250,239,235,0.3)', 'rgba(250,239,235,0.1)']
            }
          },
        },
        series: [
          {
            type: 'radar',
            data: [
              {
                name:'他评得分',
                value: [4, 4, 5, 4, 5, 4, 14, 15, 9, 14, 15],
                lineStyle: {
                  type: 'dashed',
                  color: '#3476ff',
                  opacity: '0.3',
                  width: 1
                },
                areaStyle: {
                  opacity: 0.1
                },
                label: {
                  normal: {
                    alignTo: 'labelLine',
                    textStyle: {
                      color: '#588dfb',
                      fontSize: 13,
                      fontWeight: 'bolder'
                    },
                    padding: -5,
                  }
                },
              },
              {
                name:'自评得分',
                value:  [3, 4, 0, 4, 3, 5, 13, 14, 10, 15, 15],
                lineStyle: {
                  type: 'dashed',
                  color: '#3476ff',
                  opacity: '0.3',
                  width: 1
                },
                areaStyle: {
                  opacity: 0.1
                },
                label: {
                  normal: {
                    alignTo: 'labelLine',
                    textStyle: {
                      color: '#588dfb',
                      fontSize: 13,
                      fontWeight: 'bolder'
                    },
                    padding: -5,
                  }
                },
              }
            ]
          }
        ],
      };
      that.drawChart(option,that.echartsComponnetdep);//方法同上