一、微信中使用 Echars
1.找到GitHub上的DEMO下载链接,官网有详细的使用步骤
官网:http://echarts.baidu.com/
github:https://github.com/ecomfe/echarts-for-weixin
2.下载完成后将解压好的ec-canvas文件夹放到项目根目录里或者components目录下:
3.在你要用到的.json里配置: 比如index.json (lineChart文件里-是又封装了一层的折线图组件)
{
"component": true,
"usingComponents": {
"ec-canvas":"../../components/ec-canvas/ec-canvas"
}
}
然后在index.wxml中引入 组件,
<view class="pie-charts">
<view class="lengendTitle">
<image src="{{tipImg}}" class="tipLineImg" />
<text class="tipTitle">时/分</text>
</view>
<ec-canvas
id="mychart-dom-bar"
canvas-id="mychart-bar"
ec="{{ ec }}"
></ec-canvas>
</view>
4 . 在index.js配置折线图
写在page或Component外面的:
import * as echarts from '../ec-canvas/echarts';
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
chart.setOption(option);
return chart;
}
data中定义
data: {
ec: {
onInit: initChart
},
tipImg: '../../img/lineTip.png'
},
在首页page—>index:index.json文件配置:
{
"usingComponents": {
"v-lineChart":"../../components/lineChart/index"
}
}
在首页 page—>index:index.wxml中使用:
<view class="chart-container common-bk">
<v-lineChart wx:if="{{!showDialog}}" />
</view>
效果: