微信小程序使用Echarts

在微信小程序中使用ECharts

1. 下載插件
首先，下載 GitHub 上的 ecomfe/echarts-for-weixin 項目。
下載鏈接：ecomfe/echarts-for-weixin
2. 運行項目可查看圖表示例

 

 3. 使用組件
//ec-canvas是提供的組件，將文件夾ec-canvas復制到自己的項目中

 

 

//配置要應用組件的json文件,我這里是calorimeter.json,一定注意路徑要寫對。

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

在wxml里面寫上如下標簽

<view class="box">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

wxss記得再加一下　　

.box {
	width:100%;
	height:100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
} 

　　js里面引入配置相關代碼

// 1、引入依賴腳本
import * as echarts from '../../ec-canvas/echarts';
// 2、進行初始化數據
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {

    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
           
			axisLine: {
				show:false,
			}
        }
    ],
    yAxis: [
        {
            type: 'value',

axisTick: {
show:false
}, // 添加 y軸階段區分線不顯示

            splitLine: {
				show:true, 
				lineStyle:{
                    type:'dashed'
                }
			},
			axisLine: {
				show:false,
			}
        }
    ],
    series: [
        {
            type: 'line',
            stack: '總量',
            // label: {
            //     normal: {
            //         show: true,
            //         position: 'top'
            //     }
            // },
            asmooth: true,
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0,
                      color: "#F53249" // 0% 處的顏色
                    }, {
                      offset: 0.7,
                      color: "rgba(245, 50, 73, 0.12)" // 100% 處的顏色
                     }],
                      globalCoord: false // 缺省為 false
                    }
                  }
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ec: {
      onInit: initChart // 3、將數據放入到里面
    }
  },

  onReady() {
    
  }
});

　　

// 1、引入依賴腳本
import * as echarts from '../../ec-canvas/echarts';
// 2、進行初始化數據
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

var option = {
    title: {
      text: 'Echarts學會了沒',
      left: 'center'
    },
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    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]
    }]
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart // 3、將數據放入到里面
    }
  },

  onReady() {
    
  }
});

　　

　　上邊兩套代碼做好的示例圖（后面那套代碼如下，第一套在后邊）

 

 

做的只是一個例子大家懂怎么做就行了，至於具體需求大家在Echarts官網找對應的圖形（可修改）。如下：