1、在GitHub上下载ec-canvas,地址如下:
GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本
2、找到文件夹下面的ec-canvas文件夹,把它放在与pages同级的目录。
3、在需要用到页面里面引入,如index.json
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
4、在index.js里面echarts.js
import * as echarts from '../../ec-canvas/echarts.js'
5、在index.wxml里面添加元素
<view class="box">
<ec-canvas
id="mychart-dom-bar"
canvas-id="mychart-bar"
ec="{{ ec1 }}"
></ec-canvas>
</view>
6、在index.wxss里面定义容器的大小
.box {
width:100%;
height:600rpx;
margin-top: 30;
font-size: 42rpx;
font-weight: bold;
}
7、在index.js里面添加代码
// 1、引入依赖脚本
import * as echarts from '../../../ec-canvas/echarts.js'
///报表数据
var chartData = {
dataList:[
{value: 1548,name: 'CityE'},
{ value: 735, name: 'CityC' },
{ value: 510, name: 'CityD' },
{ value: 434, name: 'CityB' },
{ value: 335, name: 'CityA' }
],
dataLegend:['CityA', 'CityB', 'CityD', 'CityC', 'CityE']
};
function setOption(dataList,dataLegend){
var option = {
title: {
text: '本月未巡检区域占比',
top:10,
left: 'center',
textStyle: {
fontSize: 14,
fontWeight: 'normal',
},
},
tooltip: {
trigger: 'item',
},
legend: {
bottom: 10,
left: 'center',
data:dataLegend,
itemWidth:8,//图例标记的图形宽度
itemHeight:8,
icon:"circle",
},
series: [
{
type: 'pie',
radius: '45%',
center: ['50%', '50%'],
selectedMode: 'single',
data:dataList,
label: {
formatter: '{b}: ({d}%)'
},
}
]
};
return option
}
// 2、进行初始化数据
function initChart(canvas, width, height, dpr) {
var echart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(echart);
let option = setOption(chartData.dataList,chartData.dataLegend)
echart.setOption(option)
chart = echart
return echart
};
const app = getApp()
///定义图表
var chart = null;
Page({
data: {
ec1: {
onInit: initChart // 3、将数据放入到里面
},
},
})
8、运行时可能会提示echarts文件比较大,如果不想要这个提示,可以去官网定制echarts类型,地址如下:ECharts 在线构建 https://echarts.apache.org/zh/builder.html
下载后,是min.js文件,可以重命名为echarts.js并替换掉项目里面的js文件
9、当放置在van-tabs的第二个tab选项时,需要在index.wxml里面加上wx:if条件
<van-tabs sticky offset-top="{{naviBarHeight}}" color="#1989f7" active="{{activeName}}" bind:change="onChange">
<van-tab title="选项卡1"></van-tab>
<van-tab title="选项卡2">
<view class="box" wx:if="{{activeName=='1'}}">
<ec-canvas
id="mychart-dom-bar"
canvas-id="mychart-bar"
ec="{{ ec1 }}"
></ec-canvas>
</view>
</van-tab>
</van-tabs>
10、js代码
data:{
activeName: 0,
},
onChange(event){
this.setData({
activeName: event.detail.name,
});
},