微信小程序使用echarts

官网文档

官网有详细介绍，只需要下载组件，引入小程序，再去官网熟悉echarts常用配置就可以了。【demo】

import echarts from '../../components/ec-canvas/echarts.js'

注意点1：

 在要使用的页面js先引入，官网好像说漏了这点。不过是这个会包含所有图表，体积会有七百多Kb,导致项目体积过大，可以根据自己使用的功能选择对应图表打包这个js文件就可以了。官网有这个功能传送门

注意点2：

给设置个父盒子包裹来控制位置和大小。要给父盒子设置个高度，不然图表显示不出来

注意点3：

  参数都设置完会发现不管还是模拟器还是真机上，图表都比较模糊，需要去设置下devicePixelRatio。就会变清晰了。

function initChart(canvas, width, height,dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio:wx.getSystemInfoSync().devicePixelRatio //解决小程序视图模糊的问题，必写
  });
  canvas.setChart(chart);
  var checkName = '今天';
  var dataLength = 14; //默认的数据长度，既真实数组的长度，必须设置，长度来源：后台传输
  //这里是echart基础配置
  var option = {
    backgroundColor: 'rgba(25,1,169,.05)',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        backgroundColor: 'rgba(245, 245, 245, 1)',
        borderWidth: 1,
        // padding: 10,
      }
    },
    dataZoom: [{
        show: false, //是否显示下方滚动条
        realtime: true,
        startValue: dataLength - 7,
        endValue: dataLength - 1, //显示数据结束位置
      },
      {
        type: 'inside',
        realtime: true,
        startValue: dataLength - 7,
        endValue: dataLength - 1, //显示数据结束位置
      }
    ],
    grid: {
      top: '20%',
      right: '0',
      left: '0',
      bottom: '12%'
    },
    xAxis: [{
      type: 'category',
      data: ['02.25', '02.26', '02.27', '02.28', '03.01', '03.02', '03.02', '02.25', '02.26', '02.27', '02.28', '03.01', '03.02', '今天'],
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      },
      position: 'top',
      axisLabel: {
        color: function(params) {
          //通过判断选中的名字改变柱子的颜色样式
          if (checkName === params) {
            return 'rgba(38,74,255,1)';
          } else {
            return 'rgba(38,74,255,.3)';
          }
        },
        textStyle: {
          fontSize: 14
        },
        padding: [10, 0]

      },

    }],
    yAxis: [{
      show: false,
      axisLabel: {
        formatter: '{value}',
        color: '#e2e9ff',
      },
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      }
    }],
    series: [{
      type: 'bar',
      data: [300, 450, 770, 203, 255, 188, 156, 300, 450, 770, 203, 255, 188, 156],
      // itemStyle: {
      //     normal: {
      //         color: 'rgba(38,74,255,.3)',
      //     }
      // },
      itemStyle: {
        normal: {
          label: {
            show: true
          },
          color: function(params) {
            //通过判断选中的名字改变柱子的颜色样式
            if (checkName === params.name) {
              return 'rgba(38,74,255,1)';
            } else {
              return 'rgba(38,74,255,.3)';
            }
          }
        }

      },
      label: {
        normal: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#B9C5FC',
            fontSize: '12'
          },
          formatter: '{c}分'
        }
      }
    }]
  };
  chart.setOption(option);
  return chart;
}

最后，熟悉下配置项具体参数，设置符合自己项目的图表。有些配置项可能还没支持小程序，具体官网有提到，需要注意。配置项