微信小程序如何使用echarts
基本所有的echarts效果都能实现，这个超级赞。
引入echarts组件
为了兼容小程序 Canvas，echarts提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。
首先，下载 GitHub 上的项目。点击进入github进行下载
下载之后解压文件即可
把ec-canvas文件拷贝到你的小程序项目component（组件）路径下
image.png
echarts组件实现
打开所需要实现echarts的组件下的workreport-echart.json文件
image.png
····
{
"usingComponents": {
"canvas-ring": "/component/canvas-ring/canvas-ring",
"ec-canvas": "/component/ec-canvas/ec-canvas"
}
}
····
打开workreport-echart.js文件
····
import * as echarts from '../../../../component/ec-canvas/echarts';//需要注意这个地方的路径不用引用错误了
const app = getApp();
//
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
//标题
title: {
text: '项目比重',
left: 'center'
},
tooltip: {//提示框，可以在全局也可以在
trigger: 'item', //提示框的样式
formatter: "{a} <br/>{b}: {c} ({d}%)",
color: '#000', //提示框的背景色
textStyle: { //提示的字体样式
color: "black",
}
},
// legend: { //图例
// orient: 'vertical', //图例的布局，竖直 vertical, horizontal为水平
// x: 'top',//图例显示在右边right
// data: ['百富OA项目', 'STOS项目', '专业化服务系统', '浙江烟草项目', 'OA项目'],
// textStyle: { //图例文字的样式
// color: '#333', //文字颜色
// fontSize: 12 //文字大小
// }
// },
series: [
{
name: '访问来源',
type: 'pie', //环形图的type和饼图相同
radius: ['50%', '70%'],//饼图的半径，第一个为内半径，第二个为外半径
avoidLabelOverlap: false,
color: ['#E062AE', '#67E0E3', '#FFDB5C', '#FF9F7F', '#4472C4'],
label: {
normal: { //正常的样式
show: true,
position: 'left'
},
emphasis: { //选中时候的样式
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
}, //提示文字
labelLine: {
normal: {
show: false
}
},
data: [
{ value: 335, name: '百富OA项目' },
{ value: 310, name: 'STOS项目' },
{ value: 234, name: '专业化服务系统' },
{ value: 135, name: '浙江烟草项目' },
{ value: 1548, name: 'OA项目' }
]
}
]
};
chart.setOption(option);
return chart;
}
// 饼状图
function initChartSec(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
title: {
text: '客户比重',
subtext: '',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
},
toolbox: {
show: false,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: '面积模式',
type: 'pie',
radius: [30, 110],
center: ['50%', '50%'],
roseType: 'area',
data: [
{ value: 10, name: 'rose1' },
{ value: 5, name: 'rose2' },
{ value: 15, name: 'rose3' },
{ value: 25, name: 'rose4' },
{ value: 20, name: 'rose5' },
{ value: 35, name: 'rose6' },
{ value: 30, name: 'rose7' },
{ value: 40, name: 'rose8' }
]
}
]
}
chart.setOption(option);
return chart;
}
// 横向柱状图
function initChartThi(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
title: {
text: '工作类型',
subtext: '',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// legend: {
// data: ['2011年']
// },
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
// data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
},
series: [
{
name: '2011年',
type: 'bar',
itemStyle: {
color: function(params) {
// 给出颜色组
var colorList = ['#E062AE', '#67E0E3', '#FFDB5C', '#FF9F7F', '#4472C4', '#E062AE'];
return colorList[params.dataIndex]
}
},
barWidth: '60%',
data: [18203, 23489, 29034, 104970, 131744, 630230],
},
]
}
chart.setOption(option);
return chart;
}
Page({
/**
* 页面的初始数据
*/
data: {
c_val: 90,
ec: {
onInit: initChart
},
ec_sec: {
onInit: initChartSec
},
ec_thi: {
onInit: initChartThi
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
var that = this;
that.canvasRing = that.selectComponent("#canvasRing");
that.canvasRing.showCanvasRing();
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
····
打开workreport-echart.wxml
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ec}}"></ec-canvas>
</view>
打开echarts.wxss
.ec_container {
/* 这里要注意，根据需要可以把 position: absolute;top: 0;bottom: 0;left: 0;right: 0;
换成 width: 100%; height: 80%;来实现页面的布局。
根据自己的需要改变即可，否则不会出页面。。。。
*/
position: absolute;
top: 400rpx;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
ec-canvas {
width: 100%;
height: 600rpx;
}
image.png
