微信小程序中使用echars
1、微信小程序中使用echars效果展示:
2、下载引入ec-canvas组件
将下载好的ec-canvas组件文件 放到 components文件夹下 (三个下载地址都可以使用,选其一即可)
-
echarts-for-weixin 下载地址:https://github.com/ecomfe/echarts-for-weixin
-
下载地址:链接:https://pan.baidu.com/s/1ezKkePG1O0_tzUUc54AH3w 提取码:4gar
-
echars官方下载地址:https://echarts.apache.org/zh/builder.html (echars在线定制包)
3、log.json文件中声明注册使用ec-canvas组件
{
"navigationBarTitleText": "查看启动日志",
"usingComponents": {
"ec-canvas": "../../components/ec-canvas/ec-canvas"
}
}
4、log.wxml 页面引入ec-canvas组件
<!-- 使用echar记得先嵌套一层设置宽高 -->
<view class="echart-box">
<ec-canvas class="ec-canvas" ec="{{ ec }}"></ec-canvas>
</view>
// css样式
.echart-box{
width: 100%;
height: 500px;
}
.ec-canvas{
width: 100%;
height: 100%;
}
5、log.js 页面
import * as echarts from '../../components/ec-canvas/echarts'; //(1)引入echarts.js
//(3)echars 初始化并生成图表
function initChart (canvas, width, height) {
console.warn(width, height,'---canvas---',canvas);
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
// canvas.setChart(chart);
//饼图
var option = {
series: [
{
type: 'pie',
data: [
{
value: 335,
name: '直接访问'
},
{
value: 234,
name: '联盟广告'
},
{
value: 1548,
name: '搜索引擎'
}
]
}
]
};
//条形图
var option2 = {
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {},
series: [
{
type: 'bar',
data: [23, 24, 18, 25, 27, 28, 25]
}
]
};
//将图表数据 添加到setOption() 中
chart.setOption(option2);
return chart;
}
Page({
data: {
//(2)echars初始化
ec: {
onInit: initChart,
},
},
})