一、前期准备
微信小程序要使用echarts必须下载ecomfe/echarts-for-weixin的项目包，复制项目内的ec-canvas文件夹到我们自己项目的根目录
二、简单说明
本人为了项目使用方便对echarts的组件又包裹了一层自己的组件，你自己开发也可以直接使用echarts的组件，下面会按照我的思路做说明
三、具体步骤
1）新建文件夹components（自定义的组件都放这里面），在文件夹内新建cj-chart组件 目录如图
文件目录结构
2）cjecharts.json文件引入echarts组件，注意路径问题
3）cjecharts.wxml写入节点信息
4）写入css，注意高度必须要写，不然图表是会显示空白的
5）重点来啦，js文件编辑，组件属性列表加入cdate作为图表数据的来源
6）添加cdate的数据监听器，当数据有变化的时候初始化ec
observers:{
"cdate":function(idate){
this.setData({
chartDate:idate,
ec:{
onInit:function(canvas,width,height,dpr){
const initChart = echarts.init(canvas,null,{
width:width,
height:height,
devicePixelRatio:dpr
});
initChart.setOption({
backgroundColor: "#ffffff",
title: [{
text:idate.title,
left:0,
textStyle:{
color:"#2f2f2f"
}
},{
text:"单位："+idate.unit,
right:'2%',
textStyle:{
color:'#999999',
fontSize:'15'
}
}],
tooltip: {
trigger: 'item'
},
legend: {
bottom: "4%",
icon: "circle"
},
series: [{
label: {
normal: {
fontSize: 14
}
},
type: 'pie',
center: ['50%', '50%'],
radius: '50%',
data: idate.chartdata,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
color: function(params) {
// build a color map as your need.
var colorList = [
'#ff4a34','#f2ca6b','#85bedb','#6f6cf2','#9dca7e',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
label: {
show: true,
formatter: '{d}%'
},
labelLine: { show: true }
}
}
}]
});
canvas.setChart(initChart);
return initChart;
}
}
});
}
},
7）完整的文件如下：
cjecharts.js
import * as echarts from '../../ec-canvas/echarts';
Component({
/**
* 组件的属性列表
*/
properties: {
cdate:{
type:Object,
value:[]
}
},
/**
* 组件的初始数据
*/
data: {
chartDate:[],
ec: {}
},
observers:{
"cdate":function(idate){
this.setData({
chartDate:idate,
ec:{
onInit:function(canvas,width,height,dpr){
const initChart = echarts.init(canvas,null,{
width:width,
height:height,
devicePixelRatio:dpr
});
initChart.setOption({
backgroundColor: "#ffffff",
title: [{
text:idate.title,
left:0,
textStyle:{
color:"#2f2f2f"
}
},{
text:"单位："+idate.unit,
right:'2%',
textStyle:{
color:'#999999',
fontSize:'15'
}
}],
tooltip: {
trigger: 'item'
},
legend: {
bottom: "4%",
icon: "circle"
},
series: [{
label: {
normal: {
fontSize: 14
}
},
type: 'pie',
center: ['50%', '50%'],
radius: '50%',
data: idate.chartdata,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
color: function(params) {
// build a color map as your need.
var colorList = [
'#ff4a34','#f2ca6b','#85bedb','#6f6cf2','#9dca7e',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
label: {
show: true,
formatter: '{d}%'
},
labelLine: { show: true }
}
}
}]
});
canvas.setChart(initChart);
return initChart;
}
}
});
}
},
/**
* 组件的方法列表
*/
methods: {
}
})
cjecharts.json
{
"component": true,
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
cjecharts.wxml
<view class="frameitem">
<ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
</view>
cjecharts.wxss
.frameitem{
border-radius: 15rpx;
width: 630rpx;
margin: 30rpx 30rpx 0;
background-color: #ffffff;
height: 350px;
padding: 30rpx;
}
- 调用方法
-
.json文件引入组件路径
json文件
-
wxml文件写入节点
wxml文件
-
js文件写入图表数据
js数据
9）运行效果
效果图
网友评论