Echarts如何在小程序中使用

Echarts如何在小程序中使用
Echarts是可以自定义安装包的，先去官网选择自己需要的图形并下载
Echarts的配置结构
废话不啰嗦，具体的业务代码结构分析一波：

function initChart2(data, canvas, width, height, dpr) {
  console.log(data)
  var option = {
    backgroundColor: "#ffffff",
    color: ["#ff5b5d", "#ffcc2d", "#5b9cff"],
    series: [{
      name: '业务指标',
      type: 'gauge',
      detail: {
        formatter: data + '%'
      },
      axisLine: {
        show: true,
        lineStyle: {
          width: 25,
          shadowBlur: 0,
          color: [
            [0.3, '#ff5b5d'],
            [0.7, '#ffcc2d'],
            [1, '#5b9cff']
          ]
        },
        textStyle: {
          fontSize: 8
        }
      },
      axisTick: { //刻度线样式（及短线样式）
        length: 6,
        distance: 28,
        splitNumber: 6
      },
      axisLabel: {
        show: true,
        distance: 10
      },
      splitLine: {
        show: true,
        length: 25,
      },
      detail: {
        formatter: data + '%',
        textStyle: {
          fontSize: 21
        }
      },
      data: [{
        value: data,
        name: '',
      }]
    }]
  };
  // chart.setOption(option, true);
  return option;
}

敲黑板

一、在当前页面中引入echarts

import * as echarts from '../../ec-canvas/echarts';

二、在onload函数中写入初始化图表的操作！！!
并声明一个初始化函数，再此函数中操作表格

this.ecComponent = this.selectComponent('#mychart-dom-gauge');
this.getLearningReports()
 getLearningReports() {
 let that = this
  app.encryption({
  //异步操作获取动态数据
  })
  //开始执行图表init，并绘制。
 that.ecComponent.init((canvas, width, height) => {
          const mychartline = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          canvas.setChart(mychartline);
          mychartline.setOption(initChart2(res.Practise.accuracy));
          return mychartline;
        })
 }