微信小程序中使用Echarts（折线图）

一、微信中使用 Echars
直接在官网小程序使用Echarts中（文档-教程-在微信中使用Echarts），找到GitHub上的DEMO下载链接，官网有详细的使用步骤
官网：http://echarts.baidu.com/

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

首先，在 pages/index目录下新建以下几个文件：index.js、 index.json、 index.wxml、 index.wxss。并且在 app.json 的 pages 中增加 'pages/index/index'。

index.json：

{"navigationBarTitleText": "图表A","enablePullDownRefresh": true,"usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas"}
}

index.js：

import * as echarts from '../../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'},color: ["#37A2DA"],legend: {data: ['A','B'],top: 20,left: 'center',backgroundColor: '#dbdbdb',z: 100},grid: {left: 0,//折线图距离左边距right: 50,//折线图距离右边距top: 30,//折线图距离上边距bottom: 10,containLabel: true},tooltip: {show: true,trigger: 'axis'},xAxis: {name: '相位',type: 'category',boundaryGap: false,data: ['0°', '90°', '180°', '270°', '360°'],// axisTick: {//   alignWithLabel:false// },// axisLine: {//   lineStyle: {//     color: '#666666'//   }// },//设置x轴的样式axisLabel: {//横坐标最后的标注颜色变深// interval: 0,show: true,textStyle: {color: '#000',fontSize: '14',}},show: true},yAxis: {name: '值',x: 'center',type: 'value',splitLine: {lineStyle: {type: 'solid'}},//设置y轴字体样式axisLabel: {show: true,textStyle: {color: '#000',fontSize: '14',}},show: true},series: [{name: 'A',type: 'line',smooth: true,data: [-50,-18, 45, 65, 30, 78, 40, 0]},{name: 'B',type: 'line',smooth: true,data: [-26, -12, 40, 56, 85, 65, 20, 10]}]};chart.setOption(option);return chart;
}
Page({data: {ec: {onInit: initChart}},onReady() {}
});

index.wxml：

<view><!-- head --><!-- <view class="head"><view class="head_config">当前值<view>-14.8dB</view></view><view class="head_config">峰值<view>-12.6dB</view></view><view class="head_config three"><view>注意：0</view><view>告警：0</view></view><view class="head_train"></view></view> --><!-- 提示 --><!-- <view class="prompt"><view class="prompt_span"><text class="prompt_first">同步:</text><text class="prompt_second">内</text></view><view class="prompt_span"><text class="prompt_first">背景:</text><text class="prompt_second">0dB</text></view><view class="prompt_span"><text class="prompt_first">背景消去:</text><text class="prompt_second">否</text></view><view class="prompt_span"><text class="prompt_first">偏移:</text><text class="prompt_second">0°</text></view><view class="prompt_span"><text class="prompt_first">增益:</text><text class="prompt_second">X40</text></view><view class="prompt_span"><text class="prompt_first">滤波:</text><text class="prompt_second">关</text></view></view> --><!-- 内容 --><!-- <view class="component"></view> --><!--  --><view class="container"><ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas></view>
</view>

index.wxss：

/* pages/weather/weather.wxss */
ec-canvas {
width: 100%;
height: 50%;
}.container {position: absolute;top: 0;bottom: 0;left: 0;right: 0;display: flex;flex-direction: column; align-items: center;justify-content: space-between;box-sizing: border-box;
}.picker-pos {
margin-top: -130rpx;
margin-left: 150rpx;
color: blueviolet;
}/* .head {overflow: hidden;margin: 10rpx;
}.head_config {float: left;margin-left: 6rpx;width: 200rpx;height: 100rpx;padding: 8rpx;border-radius: 12rpx;background-color: green;color: white;font-size: 36rpx;
}.head_train{margin-left:8rpx;float: left;width: 40rpx;height: 110rpx;background-color: #dbdbdb;
}.three{width: 160rpx;
}.prompt{width: 100%;height: 60rpx;line-height: 60rpx;margin-top: 10rpx;display: flex;flex-direction: row;align-items: center;justify-content: space-between;box-sizing: border-box;background-color: lightblue;overflow: hidden
}
.prompt_span{float: left;font-size: 28rpx;
}
.prompt_first{color: white;
}
.prompt_second{color: red;
}  */

效果如下：

其中对于全局的Echarts的样式改法，找到ec-canvas文件，如下所示，若设置背景颜色、边框之类的问题，可以在ec-canvas.wxss文件里面修改：

.ec-canvas {width: 100%;height: 100%;/* 给echarts图形添加边框 *//* border: 2rpx solid #DBDBDB; *//* 修改图形距离上边距 */margin-top: 0;/*给eecharts图形添加背景颜色*/background-color: #DBDBDB;
}

使用中遇到的问题：

不得不说，很多可用的信息没有，没有那么完整的为小程序服务的文档。
比如我的需求是怎么将x轴的精确度缩小的很小，假如我可以显示50个点，范围是[0,50]，最小的刻度即是1，那么wx-echarts是怎么设置的呢？
还有我的横坐标轴的样式问题可以在axisLabel 对象中设置，比如color、fontSize，那么如果我想改我的坐标轴的标题，即图中的“相位”和“值”，他们分别对应是xAxis和yAxis对象中的name属性值，这个我该如何修改显示的样式呢？
通过设置option中的grid对象的属性值，可以将图表内容显示在所给宽高的最大化，

grid: {left: 0,//折线图距离左边距right: 50,//折线图距离右边距top: 30,//折线图距离上边距bottom: 10,containLabel: true}

对于横纵坐标轴中的axisLabel 属性对象特别重要，比如我要复制一份表格，如果我可能一个轴设置了，另一个轴没有设置，结果会导致复制到别的地方的图表显示大小不至于的问题。如下所示：

本期的微信小程序中关于echarts的部分介绍就到这里结束了，2019的最后一个月，祝大家都能"庆余年"，在工作中收获满满。

参考：https://www.echartsjs.com/zh/option.html#xAxis.scale

微信小程序中使用Echarts（折线图）相关推荐

微信小程序中使用echarts图
嗨喽大家好,我是老黑.最近这段时间完成了一个功能,那就是在微信小程序中引入了echarts图,也算是对这段时间的工作的一个总结吧.这个功能自己花费了很长的时间才整出来.后来自己反省了以下,总结了以 ...
如何在微信小程序中使用ECharts图表
在微信小程序中使用ECharts 1. 下载插件首先,下载 GitHub 上的 ecomfe/echarts-for-weixin 项目. 下载链接:ecomfe/echarts-for-weixi ...
教你解决Taro微信小程序中使用Echarts体积过大的问题
教你解决Taro微信小程序中使用Echarts体积过大的问题背景为什么选择Echarts? 单包超过2M,如何处理? 以为到此就结束了? 最后背景近期笔者在使用Taro进行微信小程序开发,当引 ...
小程序多个echars_微信小程序中使用echarts以及踩坑总结
人在家中坐,锅从天上来. 半个月前本来在家写着一个项目,还没来得及提测,领导突然一个电话,需要立刻去支援另一个项目,一打听,一个烂尾半年的项目,纵使内心不愿意,还是要去啊.因为鲁迅说过,生活就像强*, ...
微信小程序中使用ECharts--折线图、柱状图、饼图等
微信小程序开发者的反馈,表示他们强烈需要像 ECharts 这样的可视化工具.但是微信小程序是不支持 DOM 操作的,Canvas 接口也和浏览器不尽相同. 因此,ECharts 团队和微信小程序官方 ...
微信小程序中使用echarts
echart体验示例小程序Demo: echarts微信小程序组件:兼容小程序 Canvas的组件ec-canvas,可以方便地使用 ECharts,载gitHub项目. ec-canvas 目录下有 ...
ECharts 全新大版本 4.0 正式发布即将支持微信小程序中使用ECharts
2018年1月16日,ECharts (echarts.baidu.com)发布了最新大版本 4.0,新版本在产品的性能.功能.易用性等各个方面进行了全面提升.和 ECharts 4.0 一起发布的还 ...
小程序引入的echarts过大如何解决_在微信小程序中使用 ECharts
官方文档官方已经提供了小程序版的 ECharts echarts-for-weixin 并提供的了使用示例使用方式还是熟悉的 ECharts 的配置方案,只要自己 option 或者完整的将浏览器 ...
微信小程序中使用ECharts实现报表图表展示
Echarts可视化工具很方便的解决了统计图表的问题,但是微信小程序是不支持 DOM 操作,后来在Echarts官网找到了微信小程序的版本. 开始上代码了,首先要在index.wxml中定义,我要在一 ...

微信小程序中使用Echarts（折线图）

参考：https://www.echartsjs.com/zh/option.html#xAxis.scale

微信小程序中使用Echarts（折线图）相关推荐

最新文章

热门文章