在做小程序時需要用到圖表，今天就研究了下Echarts在小程序中怎么使用躏率。在官方文檔上看了下如何使用及基本配置方法躯畴，包括如何在json、js中引入薇芝，具體配置和引入方法可以多看下Echart官方文檔蓬抄。（官方文檔地址：https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts）
這個是Echart官方在GitHub上提供的圖表組件代碼：https://github.com/ecomfe/echarts-for-weixin
下載組件后在項目中引入，網(wǎng)上有好多引入的方法夯到，大家也可以百度下嚷缭，這里就不過多的介紹了。在對應(yīng)的目錄中的json文件中引入組件耍贾，這步很重要阅爽。
"usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas"}
1、取消圖例上的點擊事件
legend:{
selectedMode:flase;//取消圖例上的點擊事件, 默認顯示
orient: 'horizontal', // 布局方式逼争，默認為水平布局 // 'horizontal' | 'vertical
}
2优床、解決 X軸 文字顯示不全或文字傾斜。
xAxis: [
axisLabel: {
show: true,
color: '#666',
interval: 0,
formatter:function(value){
var ret = "";//拼接加\n返回的類目項
var maxLength = 2;//每項顯示文字個數(shù)
var valLength = value.length;//X軸類目項的文字個數(shù)
var rowN = Math.ceil(valLength / maxLength); //類目項需要換行的行數(shù)
if (rowN > 1)//如果類目項的文字大于3,
{
for (var i = 0; i < rowN; i++) {
var temp = "";//每次截取的字符串
var start = i * maxLength;//開始截取的位置
var end = start + maxLength;//結(jié)束截取的位置
//這里也可以加一個是否是最后一行的判斷誓焦，但是不加也沒有影響胆敞，那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp; //憑借最終的字符串
}
return ret;
}
else {
return value;
}
}
}
]
3着帽、網(wǎng)格線設(shè)置 邊線顏色、類型移层、是否顯示
yAxis: [{
splitLine :{//網(wǎng)格線
lineStyle:{
type:'dashed', //設(shè)置網(wǎng)格線類型 dotted：虛線 solid:實線
color:'#ededed' //網(wǎng)格線顏色
},
show:true //隱藏或顯示 false時隱藏網(wǎng)格線
},
}]
4仍翰、更換X、Y軸刻度線顏色
axisLine: {
show:true //隱藏或顯示 false時隱藏刻度線
lineStyle: {
color: '#dadada',//X观话、Y軸刻度線顏色
}
},
5予借、圖形中顏色漸變
series: [
{
name: '上半年',
type: 'bar',
data: [300, 270, 340, 374, 300, 320, 310],
itemStyle: {
color: new echarts.graphic.LinearGradient(//圖形漸變
0, 0, 0, 1,
[
{offset: 0, color: '#d9a8f2'},
{offset: 0.5, color: '#b31fff'},
{offset: 1, color: '#5c1cff'}
]
)
}
}]
6、legend圖例上的文字要和series中的name一致频蛔，不然圖例不顯示灵迫。
legend: {
selectedMode:false,//取消圖例上的點擊事件
padding: 10, // 圖例內(nèi)邊距，單位px晦溪，默認各方向內(nèi)邊距為5瀑粥，
data: ['上半年', '下半年']
},
series: [
{
name: '上半年',
type: 'bar',
data: [300, 270, 340, 374, 300, 320, 310],
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#d9a8f2'},
{offset: 0.5, color: '#b31fff'},
{offset: 1, color: '#5c1cff'}
]
)
}
},
{
name: '下半年',
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#83bff6'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
)
},
data: [120, 102, 141, 174, 190, 250, 220]
}
]
7、圖形上顯示每個節(jié)點的數(shù)據(jù)三圆，要在series中添加 label狞换，如果不需要節(jié)點數(shù)據(jù)的話，則不用添加舟肉。
label: {
normal: {
show: true,
position: 'center',
color: '#666'
}
},
下面看下實際效果圖：
20200622163034938.png
20200622163051974.png
20200622163107617.png
20200622165343482 (1).png
