在微信小程序中使用Echarts

JS

import * as echarts from '../ec-canvas/echarts.js'
/**
* 组件的初始数据
*/
data: {
	// 数据
	 ec: {
	   onInit: {}
	 }
},
  /**
   * 组件的方法列表
   */
  methods: {
    /**
    * 加载柱状图
    */
    loadBar(categories, data){
      let that = this
      let line = this.selectComponent('#chart-line')
      line.init((canvas,width,height,dpr)=>{
        const lineChart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        })
        var lineOperation = {
          tooltip: {
            show: true,
            trigger: 'axis'
          },
          legend:{
            show: false // 不显示图例
          },
          grid: {
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              interval: 0, // 强制显示所有x轴内容
              rotate: 45, // 倾斜度 -90 至 90 默认为0
              margin: 12, // 文字距离x轴位置
              fontSize: 10 // 文字大小
            },
            data: categories // x轴名称
          },
          yAxis: {
            x: 'center',
            type: 'value',
            minInterval: 1, // 禁止y轴出现带小数的数字
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: [
            {
              name: that.data.screenName + '量',
              type: 'line',
              smooth: true, // 曲线平滑
              symbol: 'circle', // 标记的图形(圆形)
              symbolSize: 6, // 标记图形的大小
              itemStyle: {
                color: that.data.themeColor // 折线圆点颜色
              },
              lineStyle: {
                color: that.data.themeColor // 折线线条颜色
              },
              emphasis: {
                focus: 'series'
              },
              data: data // y轴数据
            }
          ]
        }
        lineChart.setOption(lineOperation)
        return lineChart
      })
    }
  }

HTML

<view class="wi-100x bs-bx pl-30 pr-30 mt-24 mb-24">
  <viewclass="wi-100x ht-600 white-bg bdr-32">
    <fo-ec-canvas class="wi-100x ht-400" id="chart-line" canvas-id="mychart-line" ec="{{ ec }}"></fo-ec-canvas>
  </view>
</view>

在微信小程序中使用 ECharts
https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
github地址
https://github.com/ecomfe/echarts-for-weixin
Echarts在线定制（把新定制的echarts.min.js替换掉原来的echarts.js）
https://echarts.apache.org/zh/builder.html