echarts配置項太多了，還是一點點積累吧~~~~~
當然前提條件還是得老老實實看echarts官方文檔 ：https://echarts.baidu.com/
今天主要就介紹下我在工作中通過echarts實現的微信小程序的折線圖
Demo地址：https://gitee.com/v-Xie/echartsDemo.git
效果嘛如下：
通過此圖分析得出需要實現以下幾點：（主要配置代碼請看后面部分）
1.標題(折線圖)-title
需：顏色，文本，位置
2.圖例（財運，感情，事業）-legend
需：圖例顏色，圖標形狀，圖標文本，各圖標間隔
3.橫縱坐標
需： 》》橫坐標-xAxis
刻度【周一，周二...周日】，-axisLabel
分割線 -splitLine
》》縱坐標-yAxis:
刻度【大吉，...凶】，-axisLabel
分割線 -splitLine
4.數據項-series
開發吧：
首先下載echarts
進行中：
目錄
line/index.wxml
<!--index.wxml-->
<
view
class=
"container">
<
view
class=
'echart_wrap'>
<
ec-canvas
id=
"mychart"
canvas-id=
"mychart-line"
ec=
"{{ ec }}"></
ec-canvas
>
</
view
>
</
view
>
line/index.json
{
"usingComponents": {
"ec-canvas":
"../../ec-canvas/ec-canvas"
}
}
line/index.js中
// 引入echarts.js
import *
as echarts
from
'../../ec-canvas/echarts';
var Chart=
null;
const app = getApp();
Page({
data: {
ec: {
onInit:
function (canvas, width, height) {
chart = echarts.init(canvas,
null, {
width: width,
height: height
});
canvas.setChart(chart);
return chart;
},
lazyLoad:
true
// 延遲加載
},
},
onLoad:
function (options) {
this.echartsComponnet =
this.selectComponent(
'#mychart');
//如果是第一次繪制
if (!Chart) {
this.init_echarts();
//初始化圖表
}
else {
this.setOption(Chart);
//更新數據
}
},
onReady() {
},
//初始化圖表
init_echarts:
function () {
this.echartsComponnet.init((canvas, width, height) => {
// 初始化圖表
const Chart = echarts.init(canvas,
null, {
width: width,
height: height
});
this.setOption(Chart)
// 注意這里一定要返回 chart 實例，否則會影響事件處理等
return Chart;
});
},
setOption:
function (Chart) {
Chart.clear();
// 清除
Chart.setOption(
this.getOption());
//獲取新數據
},
// 圖表配置項
getOption() {
var self =
this;
var option = {
title: {
//標題
text:
'折線圖',
left:
'center'
},
renderAsImage:
true,
//支持渲染為圖片模式
color: [
"#FFC34F",
"#FF6D60",
"#44B2FB"],
//圖例圖標顏色
legend: {
show:
true,
itemGap:
25,
//每個圖例間的間隔
top:
30,
x:
30,
//水平安放位置,離容器左側的距離 'left'
z:
100,
textStyle: {
color:
'#383838'
},
data: [
//圖例具體內容
{
name:
'財運',
//圖例名字
textStyle: {
//圖例文本樣式
fontSize:
13,
color:
'#383838'
},
icon:
'roundRect'
//圖例項的 icon，可以是圖片
},
{
name:
'感情',
textStyle: {
fontSize:
13,
color:
'#383838'
},
icon:
'roundRect'
},
{
name:
'事業',
textStyle: {
fontSize:
13,
color:
'#383838'
},
icon:
'roundRect'
}
]
},
grid: {
//網格
left:
30,
top:
100,
containLabel:
true,
//grid 區域是否包含坐標軸的刻度標簽
},
xAxis: {
//橫坐標
type:
'category',
name:
'日期',
//橫坐標名稱
nameTextStyle: {
//在name值存在下，設置name的樣式
color:
'red',
fontStyle:
'normal'
},
nameLocation:
'end',
splitLine: {
//坐標軸在 grid 區域中的分隔線。
show:
true,
lineStyle: {
type:
'dashed'
}
},
boundaryGap:
false,
//1.true 數據點在2個刻度直接 2.fals 數據點在分割線上，即刻度值上
data: [
'周一',
'周二',
'周三',
'周四',
'周五',
'周六',
'周日'],
axisLabel: {
textStyle: {
fontSize:
13,
color:
'#5D5D5D'
}
}
},
yAxis: {
//縱坐標
type:
'value',
position:
'left',
name:
'運勢',
//縱坐標名稱
nameTextStyle:{
//在name值存在下，設置name的樣式
color:
'red',
fontStyle:
'normal'
},
splitNumber:
5,
//坐標軸的分割段數
splitLine: {
//坐標軸在 grid 區域中的分隔線。
show:
true,
lineStyle: {
type:
'dashed'
}
},
axisLabel: {
//坐標軸刻度標簽
formatter:
function (value) {
var xLable = [];
if (value ==
20) {
xLable.push(
'大凶');
}
if (value ==
40) {
xLable.push(
'凶');
}
if (value ==
60) {
xLable.push(
'平淡');
}
if (value ==
80) {
xLable.push(
'小吉');
}
if (value ==
100) {
xLable.push(
'大吉');
}
return xLable
},
textStyle: {
fontSize:
13,
color:
'#5D5D5D',
}
},
min:
0,
max:
100,
},
series: [{
name:
'財運',
type:
'line',
data: [
18,
36,
65,
30,
78,
40,
33],
symbol:
'none',
itemStyle: {
normal: {
lineStyle: {
color:
'#FFC34F'
}
}
}
}, {
name:
'感情',
type:
'line',
data: [
12,
50,
51,
35,
70,
30,
20],
// data: ["80", "20", "50", "70", "80", "60", "70"],
symbol:
'none',
itemStyle: {
normal: {
lineStyle: {
color:
'#FF6D60'
}
}
}
}, {
name:
'事業',
type:
'line',
data: [
10,
30,
31,
50,
40,
20,
10],
// data: ["50", "30", "40", "70", "90", "30", "20"],
symbol:
'none',
itemStyle: {
normal: {
lineStyle: {
color:
'#44B2FB'
}
}
}
}],
}
return option;
},
});