怎样用软件制作曲线图,自己制作曲线图的软件

首页 > 经验 > 作者:YD1662022-11-03 02:13:04

Echarts-for-weixin 项目提供了一个小程序组件,用这种方式可以方便地使用 ECharts。 如有必要,将 ec-canvas 目录下的 echarts.js 替换为最新版的 ECharts。如果希望减小包体积大小,可以使用自定义构建生成并替换 echarts.js

根据Echarts官方文档可以看到,Echarts是兼容了微信小程序的;那么我们就可以放心大胆地使用了;找到相对于的代码即可开始开发了

官方网站:https://echarts.apache.org/handbook/zh/how-to/cross-platform/wechat-app/

GitHub:https://github.com/ecomfe/echarts-for-weixin

怎样用软件制作曲线图,自己制作曲线图的软件(1)

我们在GitHub中将代码下载下来拿到ec-canvas文件放置到我们自己项目中去;也可以根据自己的需要去下载相对应的模板;

然后在需要的页面的json文件中引入文件

{ "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } }

引入组件在html中

<view class="mall-ec"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" ></ec-canvas> </view>

然后初始化并配置;参数,这儿的操作就跟Echarts正常操作是一致的(看文档即可)

import * as echarts from '../../ec-canvas/echarts'; 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' }] }; chart.setOption(option); return chart; } data: { ec: { onInit: initChart }, },

这样效果图就出来;是不是很简单啊? 你也赶紧去试试吧!

怎样用软件制作曲线图,自己制作曲线图的软件(2)

---更新---

我们可能用不到所有的api,那么我们可能就会定制自己开发需要的api这些;这个时候会出现以下报错:

Cannot read property 'get' of undefined

怎样用软件制作曲线图,自己制作曲线图的软件(3)

当大家看到这个错误的时候;降本就行;我试了很多版本;发现4.7.0这个版本是可以的;大家有兴趣的话也可以去试试其他的版本;到时候可以跟我说一哈哦。

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.