ec-canvas文件夹下载:下载 GitHub 上的 ecomfe/echarts-for-weixin 项目(ps:建议使用谷歌浏览器,即Google Chrome,主要是页面全英文,谷歌浏览器可以翻译网页)。
把下载的echarts-for-weixin-master.zip解压,打开echarts-for-weixin-master文件夹,然后把ec-canvas文件夹复制,再放进小程序项目里即可(要注意放的位置,后边会根据放的位置写调用的路径)。
注:以下的xxx为你要写的呢个页面的名称,由于怕误导写错地方了,所以不已真实文件名写入,除非是共有的比有文件,否则不会以真实名称显示
在xxx.json中调用,相当于调用组件"usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" }
。
在xxx.js文件中导入import * as echarts from "../../ec-canvas/echarts";
(ps:引号里的路径自己看情况写自己的文件路径)。
在xxx.wxml调用ec-canvas插件
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
想要改样式的话请自行前去更改app.wxss里边的样式,或者自己直接写样式,然后替换样式名就行。(ps:最好是自己改一下,省的出岔子)
重点来了,要在xxx.wxss里写如下样式:
ec-canvas{
width: 90vw;
height: 50vh;
}
(必须要写这俩,哪怕你宽高小点,也得写,不然你出不来,默认是没有宽高的)
以下皆乃xxx.js
中编辑:
先写initChart函数
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
};
chart.setOption(option);
return chart;
}
然后在page中写data数据:
page:{
data:{
ec: {
onInit: initChart
},
}
}
这里的initChart即上边的呢个initChart函数,ec是xxx.wxml里边的ec = “{{ ec }}”中的后者ec,其实你不难发现的撒!
这就差不多了,然后去echarts官网点我跳转,实例中的官方实例也好GL实例也罢,在里边找自己想用的,然后复制代码,直接拿去用 。
以折线图的第三个平滑折线图为例:把整个option复制
然后放在initChart里边的var option={}的{}里边
例:
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
chart.setOption(option);
return chart;
}
就会有这样的一个图:
然后只需要改option里边的数据即可。
今天就到这了,有什么问题可以私聊哦!基本啥都可撩的哦~
这个3d的地球是不是很帅,在GL实例里边有哦
献上紫女姐姐的美图一张,嘿嘿。
哦哟,差点忘了重点,逼疯一个程序猿,根本不是难事,甚至还很简单,只需要一个字母(含大小写),标点(含中英文)甚至一个空格就可以,让他的代码整个乱套。切忌死循环哦,今天一个失误,写了一个逻辑死循环,结果就不说了···,感兴趣的自行体验。
于庚子年皋月廿柒子时作。别问,问就是"乌黑星辰落满地"了。意境自己体悟!!!