1.下载小程序版echarts文件http://文件地址:https://github.com/ecomfe/echarts-for-weixin/tree/master
2.将下载的文件放入小程序根目录下
3.项目文件引入
4.使用
echarts.wxml (使用请忽略<mp-tabs>标签)
<view class="pie">
<ec-canvas id="pie" canvas-id="pie" ec="{{ec}}"></ec-canvas>
</view>
<mp-tabs tabs="{{tabs}}" activeTab="{{activeTab}}" swiperClass="weui-tabs-swiper" bindtabclick="onTabCLick" bindchange="onChange" activeClass="tab-bar-title__selected">
<view slot="tab-content-0">
<view class="line">
<ec-canvas id="line" canvas-id="line" ec="{{ec}}"></ec-canvas>
</view>
</view>
<view class="tab-content" slot="tab-content-1">
<view class="line">
<ec-canvas id="bar" canvas-id="bar" ec="{{ec}}"></ec-canvas>
</view>
</view>
</mp-tabs>
echarts.js
import * as echarts from '../../ec-canvas/echarts';
Page({
data: {
ec: { lazyLoad: true },
tabs: [{ title: "折线图" }, { title: "柱形图" }],
activeTab: 0,
data1: [
{ label: "周一", value: 150 },
{ label: "周二", value: 230 },
{ label: "周三", value: 224 },
{ label: "周四", value: 218 },
{ label: "周五", value: 135 },
{ label: "周六", value: 117 },
{ label: "周日", value: 260 },
]
},
onLoad() {
let line = this.selectComponent('#line')
let pie = this.selectComponent("#pie")
let bar = this.selectComponent("#bar")
this.initEcharts(line, this.data.data1, 'line')
this.initEcharts(pie, this.data.data1, 'pie')
this.initEcharts(bar, this.data.data1, "bar")
},
setOptionLine(chart, data = []) {
let label = []
let value = []
label = data.map(i => i.label)
value = data.map(i => i.value)
let option = {
xAxis: { type: 'category', data: label },
yAxis: { type: 'value' },
series: [
{ data: value, type: 'line' },
]
}
chart.setOption(option);
},
setOptionPie(chart, data = []) {
let datas = data.map((i) => {
return { name: i.label, value: i.value }
})
let option = {
title: { text: "数量占比", left: "center" },
tooltip: { trigger: 'item' },
legend: {
top: '5%',
left: 'left',
top: "center",
show: true,
orient: "vertical"
},
series: [
{
name: '星期',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: { show: false, position: 'center' },
emphasis: {
label: { show: true, fontSize: 30, }
},
labelLine: { show: false },
data: datas
}
]
};
chart.setOption(option);
},
setOptionBar(chart, data = []) {
let label = []
let value = []
label = data.map(i => i.label)
value = data.map(i => i.value)
let option = {
xAxis: { type: 'category', data: label },
yAxis: { type: 'value' },
series: [
{ data: value, type: 'bar' }
]
};
chart.setOption(option);
},
initEcharts(e, data, type) {
e.init((canvas, width, height, dpr) => {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
})
switch (type) {
case 'line':
this.setOptionLine(chart, data)
break;
case 'pie':
this.setOptionPie(chart, data)
break;
case 'bar':
this.setOptionBar(chart, data)
break;
}
return chart
})
},
onTabCLick(e) {
const index = e.detail.index
this.setData({ activeTab: index })
},
onChange(e) {
const index = e.detail.index
this.setData({ activeTab: index })
},
onPullDownRefresh() { },
})
echarts.wxss
/* 定义容器大小 */
.pie{
width: 100%;
height: 600rpx;
}
.line{
width: 100%;
height: 500rpx;
}
/* 组件大小与父元素保持一致 */
ec-canvas{
width: 100%;
height: 600rpx;
}
5.效果