日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

1、ehcats組件庫可自行到echats官網(wǎng)下載，下載好之后放到你的項目包里面。

下載地址：
https://Github.com/ecomfe/echarts-for-weixin

2、echarts.json 部分

首先在json文件里引入echarts組件

{ "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" //這里使用了相對路徑 } }

2、echarts.html 部分

<view class="contAIner">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
<!-- 在這引入echarts組件標(biāo)簽 -->
</view>

這里ec-canvas綁定id就可以使用echarts組件

3、echarts.css 部分

.container{
  width: 100%; 
  height: 520rpx; 
}
.ec-canvas{
  width: 100%;
  height: 520rpx;
}

組件ec-canvas默認(rèn)寬高100%，它的寬高大小取決于它的父元素view標(biāo)簽

4、echarts.js 部分

import * as echarts from '../../ec-canvas/echarts';
// chart為圖表實例，記得要聲明為全局的
var chart = null
function initChart(canvas, width, height, dpr) {
      chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr
		});
      chart.showLoading() //顯示Loading
      canvas.setChart(chart);
      var option = {
      title: {
      text: '獲取數(shù)據(jù)中',
      left: 'center'
      },
      };
      chart.setOption(option);
      return chart;
}
Page({
      data: {
      ec: {
      onInit: initChart
      }
      },
      onLoad() {},
      getData() {
          //這里是模擬的數(shù)據(jù)請求，項目中請使用wx.request替換掉setTimeouot
          setTimeout(() => {
          chart.hideLoading() //隱藏Loading
          chart.setOption({
          title: {
          text: '獲取數(shù)據(jù)完成',
          },
          legend: {
          data: ['A', 'B', 'C'],
          top: 50,
          left: 'center',
          backgroundColor: 'red',
          z: 100
          },
          grid: {
          containLabel: true
          },
          tooltip: {
          show: true,
          trigger: 'axis'
          },
          xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          // show: false
          },
          yAxis: {
          x: 'center',
          type: 'value',
          splitLine: {
          lineStyle: {
          type: 'dashed'
          }
          }
          // show: false
          },
          series: [{
          name: 'A',
          type: 'line',
          smooth: true,
          data: [18, 36, 65, 30, 78, 40, 33]
          }, {
          name: 'B',
          type: 'line',
          smooth: true,
          data: [12, 50, 51, 35, 70, 30, 20]
          }, {
          name: 'C',
          type: 'line',
          smooth: true,
          data: [10, 30, 31, 50, 40, 20, 10]
          }]
          })
      }, 1000);
},
   /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成  根據(jù)項目需求在不同周期調(diào)用
   */
  onReady() {
    //獲取數(shù)據(jù)
    this.getData()
    },
});

5、最終的效果圖如下：

6、最后總結(jié)一下JS思路，首先import引入echats組件庫，在data中定義好key，然后進(jìn)行echats的初始化，在初始化中需要echats組件的配置信息(在echats官網(wǎng)示例里找)，最后在生命周期函數(shù)中進(jìn)行初始化函數(shù)的調(diào)用，把必要的參數(shù)傳進(jìn)去就可以出效果了。