微信小程序中-折线图

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: ,//每个图例间的间隔

top: ,

x: ,//水平安放位置,离容器左侧的距离 'left'

z: ,

textStyle: {

color: '#383838'

},

data: [//图例具体内容

{

name: '财运',//图例名字

textStyle: {//图例文本样式

fontSize: ,

color: '#383838'

},

icon: 'roundRect'//图例项的 icon，可以是图片

},

{

name: '感情',

textStyle: {

fontSize: ,

color: '#383838'

},

icon: 'roundRect'

},

{

name: '事业',

textStyle: {

fontSize: ,

color: '#383838'

},

icon: 'roundRect'

}

]

},

grid: {//网格

left: ,

top:,

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: ,

color: '#5D5D5D'

}

}

},

yAxis: {//纵坐标

type: 'value',

position:'left',

name: '运势',//纵坐标名称

nameTextStyle:{//在name值存在下，设置name的样式

color:'red',

fontStyle:'normal'

},

splitNumber: ,//坐标轴的分割段数

splitLine: {//坐标轴在 grid 区域中的分隔线。

show: true,

lineStyle: {

type: 'dashed'

}

},

axisLabel: {//坐标轴刻度标签

formatter: function (value) {

var xLable = [];

) {

xLable.push('大凶');

}

) {

xLable.push('凶');

}

) {

xLable.push('平淡');

}

) {

xLable.push('小吉');

}

) {

xLable.push('大吉');

}

return xLable

},

textStyle: {

fontSize: ,

color: '#5D5D5D',

}

},

min: ,

max: ,

},

series: [{

name: '财运',

type: 'line',

data: [, , , , , , ],

symbol: 'none',

itemStyle: {

normal: {

lineStyle: {

color: '#FFC34F'

}

}

}

}, {

name: '感情',

type: 'line',

data: [, , , , , , ],

// data: ["80", "20", "50", "70", "80", "60", "70"],

symbol: 'none',

itemStyle: {

normal: {

lineStyle: {

color: '#FF6D60'

}

}

}

}, {

name: '事业',

type: 'line',

data: [, , , , , , ],

// data: ["50", "30", "40", "70", "90", "30", "20"],

symbol: 'none',

itemStyle: {

normal: {

lineStyle: {

color: '#44B2FB'

}

}

}

}],

}

return option;

},

});