一、微信中使用 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 屬性對象特别重要，比如我要複制一份表格，如果我可能一個軸設定了，另一個軸沒有設定，結果會導緻複制到别的地方的圖表顯示大小不至于的問題。如下所示：
![【docker】 dockerfile 的CMD ENTRYPOINT指令差別解析[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)