小程序 折线图
转载：https://www.cnblogs.com/lingXie/p/10620411.html
echarts配置项太多了，还是一点点积累吧~~~~~
当然前提条件还是得老老实实看echarts官方文档 ：https://echarts.baidu.com/
今天主要就介绍下我在工作中通过echarts实现的微信小程序的折线图
效果如下：
通过此图分析得出需要实现以下几点：（主要配置代码请看后面部分）
1.标题(折线图)-title
需：颜色，文本，位置
2.图例（财运，感情，事业）-legend
需：图例颜色，图标形状，图标文本，各图标间隔
3.横纵坐标
需： 》》横坐标-xAxis
刻度【周一，周二...周日】，-axisLabel
分割线-splitLine
》》纵坐标-yAxis:
刻度【大吉，...凶】，-axisLabel
分割线-splitLine
4.数据项-series
开发吧：
首先下载echarts
进行中：
目录
line/index.wxml
<!--index.wxml-->
<viewclass="container">
<viewclass='echart_wrap'>
<ec-canvasid="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*asechartsfrom'../../ec-canvas/echarts';
varChart=null;
constapp = getApp();
Page({
data: {
ec: {
onInit:function(canvas, width, height) {
chart = echarts.init(canvas,null, {
width: width,
height: height
});
canvas.setChart(chart);
returnchart;
},
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) => {
// 初始化图表
constChart = echarts.init(canvas,null, {
width: width,
height: height
});
this.setOption(Chart)
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
returnChart;
});
},
setOption:function(Chart) {
Chart.clear();// 清除
Chart.setOption(this.getOption());//获取新数据
},
// 图表配置项
getOption() {
varself =this;
varoption = {
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) {
varxLable = [];
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('大吉');
}
returnxLable
},
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'
}
}
}
}],
}
returnoption;
},
});
