小程序中使用echarts

第一步：下载echarts小程序版

下载地址 https://github.com/ecomfe/echarts-for-weixin

第二步：将下载好的文件中 ec-canvas目录 放在小程序根目录下即可 第三步：使用

• 1在需要使用的页面引入

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

• 2在wxml中建立canvas元素

    <view class="echartbox" hover-class="none" hover-stop-propagation="false">
        <ec-canvas
         ec="{{echjson}}"
         id="mychart"
         force-use-old-canvas="{{false}}"
        ></ec-canvas>
    </view>
    
  

• 3在wxss设置高度

    .echartbox{
      width: 89%;
      background-color: #fff;
      border-radius: 8rpx;
      height: 450rpx;
      padding-left: 30rpx;
      padding-top: 30rpx;
      margin: 30rpx auto;
    }
  

• 4在页面的js文件中引入echarts

    import * as echarts from '../../ec-canvas/echarts';
    
    Page({
      data: {
        echjson:{
          lazyLoad:true//延时加载
        }
      },
      onLoad(){
        //获取echart实例
        this.barComponent = this.selectComponent('#mychart');
        //获取数据
        this.getlist();
      },
      //事件处理函数
      //加载echarts
      init_bar(data1,data2){
        this.barComponent.init((canvas,width,height)=>{
        //初始化图表
        const barChart = echarts.init(canvas,null,{
            width:width,
            height:height
        });
        barChart.setOption(this.getOptions(data1,data2));
            //注意这里一定要返回 chart 实例，否则会影响事件处理等
            return barChart;
        })
      },
      //加载数据
      getoptions(data1,data2){
        const options = {
          // 标题
          // title: {
          //   text: '签约记录',
          //   //subtext: '纯属虚构',
          //   textStyle: {
          //     color: '#313131',
          //     fontSize: 14,
          //     fontWeight: 'normal'
          //   }
          // },
          legend: {
            align: 'left',
            left:'1%',
            data: ['总单', '已签约']
          },
          //控制图例的颜色
          color:['#09566C','#F3C01D'],
          // 工具提示
          tooltip: {
            trigger: 'axis',
            axisPointer:{
              type:'none'
            },
            show:true
          },
          //右上角操作提示
          toolbox: {
            show: false,
            feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          //是否启用拖拽重计算特性，默认关闭(即值为false)
          calculable: false,
          /*控制图例的位置*/
          // grid: {
          //   top: '0',
          //   left: '0',
          //   right: '0',
          //   bottom: '-11%',
          //   containLabel: true
          // },
          xAxis: [
              {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                //控制网格线是否显示
                splitLine: {
                  show: false, 
                  //改变轴线颜色
                  lineStyle: {
                    //使用深浅的间隔色
                    color: ['red']
                  }                            
                },
                // x轴的字体样式
                axisLabel: {        
                  show: true,
                  textStyle: {
                    color: '#333',
                    fontSize:'12'
                  }
                },
                //x轴的颜色和宽度
                axisLine:{
                  lineStyle:{
                    color:'#fff',
                    width:1,   //这里是坐标轴的宽度,可以去掉
                  }
                }
              }
          ],
          yAxis: [
              {
                type: 'value',
                //控制网格线是否显示
                splitLine: {
                  show: true, 
                  //改变轴线颜色
                  lineStyle: {
                    //使用深浅的间隔色
                    color: ['#eee']
                  }                            
                },
                // y轴的字体样式
                axisLabel: {        
                  show: true,
                  textStyle: {
                    color: '#333',
                    fontSize:'12'
                  }
                },
                //y轴的颜色和宽度
                axisLine:{
                  lineStyle:{
                    color:'#fff',
                    width:1,   //这里是坐标轴的宽度,可以去掉
                  }
                }
              }
          ],
          series: [
              {
                name: '已签约',
                type: 'bar',
                stack:'num',//控制是否堆叠
                barWidth: '50%',
                data:data1
                // data: [26, 59, 90, 264, 287, 70, 175, 182, 48, 188, 60, 230]
              },
              {
                name: '总单',
                type: 'bar',
                stack:'num',//控制是否堆叠
                barWidth: '50%',
                data:data2
                // data: [20, 49, 70, 232, 256, 767, 135, 162, 32, 20, 64, 330],
              }
          ]
        };
        return options;
      },
      getlist(){
        wx.request({
          url: app.globalData.baseurl+'/api2/sales/mydashboard',
          header:{
            'cookie': wx.getStorageSync("sessionid")
          },
          method:'GET',
          success(res){
            if(res.data&&res.data.status=='success'){
                const singnum = res.data.arr1;
                const totalnum = res.data.arr2
                //加载echart图表
                this.init_bar(singnum,totalnum);
            };
          }
        })
      }
    })