Echarts——我们来了!!!
微信小程序引入 echarts ( 数据图表 );
talk is cheap , show me the code
环境准备:
微信开发者工具等相关开发环境已准备好;
第一步:
下载官方提供的小程序版 ECharts echarts-for-weixin
第二步:
2.1: 将下载好的echarts-for-weixin 文件解压;
2.2:将解压后的ec-canvas文件放在项目文件夹下(或根目录下——随意);
2.3:打开微信开发者工具,并新建项目;(此处新建项目webtwo);
2.4:打开webtwo项目,新建page文件夹,在page文件夹下新建line文件夹,然后鼠标右键选中line文件夹,选择新建Conponent,填入index;此时微信的index页面就创建好了;
如图显示:
仅供参考:
ok ! 至此都已准备结束,开始编写代码
第三步:
3.1:
line文件夹下四个文件:wxml,wxss,json,js
wxml:
我们给页面添加一个组件:(如下)
<view class="container">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}">ec-canvas>
view>
wxss:
/**index.wxss**/
page{
background-color: #dbeef5;
}
ec-canvas {
width: 100%;
height: 100%;
}
page:给页面设置背景色
ec-canvas:设置图表显示的宽度和高度
json:
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
因为新建的页面中,json内为空——如下:
{
"usingComponents": {
}
}
因此,我们需要在此添加 "ec-canvas": "../../ec-canvas/ec-canvas"
这一配置的作用是,允许我们在 pages/line/index.wxml
中使用 组件
如果你的目录结构与我相同,可以使用../../ec-canvas/ec-canvas;要根据实际目录结构来哟;
js:
import * as echarts from '../../ec-canvas/echarts';//引用小程序组件
const app = getApp();
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
var option = {
title: {
text: '要 努 力 啊 , 少 年 !',
left: 'center'
},
color: ["#4876FF", "#32CD32", "#DC143C"],
legend: {
data: ['人际', '勤奋', '潜力'],
top: 30,
left: '30%',
backgroundColor: '#E0FFFF',
z: 100
},
grid: {
containLabel: true,
borderColor:'#7FFFD4'
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
name:'年龄',
type: 'category',
boundaryGap: false,
nameTextStyle:{
padding:[0,0,0,-10]
},
nameLocation:'end',//坐标轴名称显示位置。
axisLabel : {//坐标轴刻度标签的相关设置。
interval:0,
rotate:"0"
},
data: ['25', '30', '35', '40', '45', '50'],
// show: false
},
yAxis: {
name:'经验值',
x: 'center',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
// show: false
},
series: [{
name: '人际',
type: 'line',
smooth: true,
data: [35, 50, 70, 85, 90, 80]
}, {
name: '勤奋',
type: 'line',
smooth: true,
data: [40, 55, 60, 70, 65, 60]
}, {
name: '潜力',
type: 'line',
smooth: true,
data: [50, 68, 80, 85, 75, 68]
}]
};
chart.setOption(option);
return chart;
}
Page({
onShareAppMessage: function (res) {
return {
title: 'ECharts 可以在微信小程序中使用啦!',
path: '/pages/index/index',
success: function () { },
fail: function () { }
}
},
data: {
ec: {
onInit: initChart
}
},
onReady() {
}
});
此处js代码源码贴上
感兴趣的朋友可以参考:
https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
效果如下: