微信小程序中使用echarts

1、下载小程序专用的echarts https://github.com/ecomfe/echarts-for-weixin
把下载下来的echarts-for-weixin里的ec-canvas文件复制到小程序目录下


在需要用到echarts的页面的json中引入

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

wxml

<view class="Main">
	<view class="tit">
		<view class="present {{isok==0?'active':''}}" bindtap="week">本周</view>
		<view class="present {{isok==1?'active':''}}" bindtap="month">近一月</view>
	</view>
	<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

wxss

.Main{
  width: 720rpx;
  height: 795rpx;
  background-color: #ffffff;
  border-radius: 17rpx;
  margin: 0 auto ;
}
.Main .tit{
  z-index: 100000000;
  width: 50%;
  position: relative;
  left: 23rpx;
  top: 41rpx;
}
.Main .present{
  width: 156rpx;
  height: 60rpx;
  border-radius: 10rpx;
  border: 1rpx #7D7D7D solid;
  margin-right: 17rpx;
  float: left;
  text-align: center;
  font-size: 28rpx;
  line-height: 60rpx;
}
.Main .active{
  transition:0.2s;
  background-color: #317FFF;
  color: #ffffff;
}

js

// pages/Network/Network.js
import * as echarts from '../../compent/ec-canvas/echarts';  //引入echarts
function setOption(chart, xlist1, xlist2) {
  var option = {
    color: ['#FF9F17', '#317FFF'], //柱子颜色
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left:10,
      right:11,
      bottom:106,
      top: 77
    //   x: 50,
    //   y: 100,
    //   x2: 50,
    //   y2: 30
    },
    legend: [
      {
      orient: 'horizontal',
      icon: "circle", 
      // align: 'right',
      top:"3%",
      left: '64%',
      data: ['网点销售'],  
      textStyle:{  
          fontSize: 15,  
          color:'#000000'  
      } 
      },{
        orient: 'horizontal',
        icon: "circle", 
        // align: 'right',
        top:"8%",
        left: '64%',
        data: ['网点销售额'],  
        textStyle:{  
            fontSize: 15,  
            color:'#000000'  
        } 
        }],
    toolbox: { //侧边调整图形的
      show: false,
      // orient: 'vertical',
      // left: 'right',
      // top: 'center',
      // feature: {
      //     mark: {show: true},
      //     dataView: {show: true, readOnly: false},
      //     magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
      //     restore: {show: true},
      //     saveAsImage: {show: true}
      // }
    },
    xAxis: [{
      type: 'category',
      axisTick: {
        show: true
      },
      axisTick:{show:false},//轴刻度线
      axisLabel: {
        interval: 0,
        show: true,
            textStyle: {
                color: '#000000',
                fontSize: 14, 
            },
        formatter: function (value) {
          //x轴的文字改为竖版显示
          var str = value.split("");
          return str.join("\n");
        }
      },
      data: ['荔湾区府', '荔湾区住建局', '越秀区', '天河区', '白云区']
    }],
    yAxis: [{
      type: 'value',
      axisTick:{show:false},//y轴刻度线
      splitLine: {show: false}, //去除网格线
      axisLabel: {
        formatter: function (value) { //修改y轴数值
          var texts = [];
          // if(value==0){
          // texts.push('');
          // }
          return texts;
        }
      },
    }],
    series: [{
        name: '网点销售',
        type: 'bar',
        data: xlist1, //x轴对应列的值
        itemStyle: { //上方显示数值
          normal: {
            label: {
              show: true, //开启显示
              position: 'top', //在上方显示
              textStyle: { //数值样式
                color: '#333333',
                fontSize: 14
              }
            }
          }
        }
      },
      {
        name: '网点销售额',
        type: 'bar',
        data: xlist2, //x轴对应列的值
        itemStyle: { //上方显示数值
          normal: {
            label: {
              show: true, //开启显示
              position: 'top', //在上方显示
              textStyle: { //数值样式
                color: '#333333',
                fontSize: 14
              }
            }
          }
        }
      },
    ]
  };
  chart.setOption(option);
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      lazyLoad: true
    },
    xlist:[],
    xlist2:[],
    isok: 0,
  },
  // tab切换
  week(){ // 切换本周
    this.setData({
      isok:0,
      xlist1:[20,60,100,200,500],
      xlist2:[50,90,150,100,300]
    })
    this.init_one(this.data.xlist1, this.data.xlist2)
  },
  month(){ // 切换近一月
    this.setData({
      isok:1,
      xlist1:[50,90,150,100,300],
      xlist2:[50,90,150,100,300]
    })
    this.init_one(this.data.xlist1, this.data.xlist2)
  },
  getOneOption:function(){ //初始化
    this.setData({
      xlist1:[20,60,100,200,500],
      xlist2:[50,90,150,100,300]
    })
    this.init_one(this.data.xlist1, this.data.xlist2)
  },
  init_one: function (xlist1, xlist2) {           //初始化第一个图表
    console.log(this.oneComponent)
    this.oneComponent.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      setOption(chart, xlist1,xlist2)  //赋值给echart图表
      this.chart = chart;
      return chart;
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.oneComponent = this.selectComponent('#mychart-dom-bar');
    this.getOneOption();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
    
  },

})