欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序中使用echarts

程序员文章站 2024-01-08 10:59:16
...

微信小程序中使用echarts

1、下载小程序专用的echarts https://github.com/ecomfe/echarts-for-weixin
把下载下来的echarts-for-weixin里的ec-canvas文件复制到小程序目录下
微信小程序中使用echarts
微信小程序中使用echarts
在需要用到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 () {
  
    
  },

})