微信小程序中使用echarts，及echarts.js文件过大问题，并且实现异步请求数据 赋值渲染

关于这个东西。。。头疼了两天。。。什么全局定义数据啥的 数据能获取，数据能赋值但是无法实现响应式。。。看如下代码吧。

引入这一块，因为小程序不能接受太大文件，可以自定义选择想要的图形，自定义构成一个文件大约小一半从900多kb变成400多，直接看人家的链接吧，不过多叙述了。。

​​​​​​微信小程序引入echarts过大最佳解决方案、echarts在微信开发者工具中不跟随滑动、使用echarts控制台提示使用canvas 2d_昌杰的攻城狮之路的博客-CSDN博客

如何使用。

1、首先要先去https://github.com/ljy-110/echarts-for-weixin，下载一个文件包，`ec-canvas`,然后倒入到我们所需要的项目中，然后引入使用。

当然如果嫌弃太大就如上下载一个自定义小的文件替代这个900kb的文件。

 2、导入到项目中 与page同级

 3、书写代码 html（因为个人需要多套了层view，看个人需要）

<view class="progress">
  <view class="container"  style="height: {{canheight}}rpx;">
    <ec-canvas  type="2d" force-use-old-canvas="true" id="mychart" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
  </view>
</view>

css （html中高度是因为我需要根据后端传过来的内容数量来定义高度，所以动态{{}}）

.progress{
  position: relative;
  margin:30rpx  auto;
  width: 92.5%;
  height: 100%;
  min-height: 1300rpx;
  z-index: 1;
  border-radius: 20rpx;
  padding: 25rpx 10rpx;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.18);
}
.progress .container{
  width: 100%;
}
.progress .container ec-canvas {
  width: 100%;
  height: 100%;
}

json(注意路径)

"usingComponents": {
    "ec-canvas": "../../../ec-canvas/ec-canvas"
  }

js（代码有点长直接复制下来做一个dome）

import * as echarts from '../../../ec-canvas/echarts';
var dataList = [];
var dataList2 = [];

Page({
  data: {
    ec: {
      lazyLoad: true // 延迟加载
    },
    isUseNewCanvas:true,
    canheight:800
  },
  onReady: function () {
    this.echartsComponnet = this.selectComponent('#mychart');
    this.getData(); //获取数据
  },
  getData: function () {
    //异步数据
    setTimeout(() => {
      dataList = ['田七','赵六','王五','李四','张三','汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎',"1008611"];
      dataList2=['250','210','112','82','232','302', '322', '153', '244', '150', '59', '151',"69"]
      this.init_echarts();//初始化图表
    },1500);	
  },
  //初始化图表
  init_echarts: function () {
    this.echartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,

      });
      chart.setOption(this.getOption());
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },
  getOption: function () {
    var option = {
    
      color:['#8748EE'],
      tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      },
      confine: true
    },
    legend: {
      data: ['热度', '正面', '负面']
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 15,
      top: 40,
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        axisTick: { show: false },
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666'
        }
      }
    ],
    yAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        data:dataList, //y轴样式
        axisLine: {
          lineStyle: {
            color: '#999'
            // 左侧线
          }
        },
        axisLabel: {
          color: '#666'
        //   左侧字
        }
      }
    ],
    series: [
      {
        name: '热度',
        type: 'bar',
        barWidth:'70%',          //宽度
        label: {
          normal: {
            show: true,
            position: 'inside'
          }
        },
        data: dataList2,// 柱形图样式 
        // itemStyle: {
        //   emphasis: {
        //     color: '#5523EA'
        //   }
        // }
      },
      {
        name: '正面',
        type: 'bar',
        stack: '总量',
        label: {
          normal: {
            show: true
          }
        },
        // data: [108,120, 102, 141, 174, 190, 250, 220],     //第二根柱形图
        itemStyle: {
        //   emphasis: {
        //     color: '#32c5e9'
        //   }
        }
      },
      {
        name: '负面',
        type: 'bar',
        stack: '总量',
        label: {
          normal: {
            show: true,
            position: 'left'
          }
        },
        // data: [-20, -32, -21, -34, -90, -130, -110],   //第三根柱形图
        itemStyle: {
          // emphasis: {
          //   color: '#67e0e3'
          // }
        }
      }
    ]
  };
    return option;
  },
});

效果图如下。。。

然后宽度、颜色、条数(js代码中有注释// 放开了自己看效果)，正负数等可根据自己需求调试

getDate函数模拟异步请求，将数据赋值给全局datalist后使用，

getoption中的option就是画布中需要渲染的内容，将datalist赋值给option中需要的地方

至于每一种图表样式的option在官网文档中直接cv如下图左侧那一块。。。。。。

 但是到这要注意，你是否自定义构造了echarts文件，如果是渲染不同的图表注意构造不同的js文件替换掉，可多选。。。。也可以直接用原来的900多kb的文件夹。。就没有这些心事了。