一、微信中使用 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的最后一个月,祝大家都能"庆余年",在工作中收获满满。