小程序中使用echarts-学习

首先得益于该分享：https://blog.csdn.net/nmyangmo/article/details/79413030#comments

该文章介绍了如何结合小程序（务必先看看）

记录一下我在使用中遇到的问题：

     不能使用echarts官网精简版的替换原来的（我是出现了legend不显示）

     为了减少体积可以在线构建（https://echarts.baidu.com/builder.html）选择，下载后替换

看一下实现的效果

1.修改了legend的样式

legend: {

// 改变图标大小

itemHeight: 9,

data: [{

name: '标准水平',

icon:'bar',

textStyle:{

fontSize: 12,

color: 'rgb(225, 212, 168)'

}

}, {

name: '宝宝情况',

icon:'bar',

textStyle:{

fontSize: 12,

color: 'rgb(205, 148, 15)'

}

}],

left: 'center',

z: 100

},

2.改变坐标轴箭头样式

axisLine: {

// 坐标带箭头

symbol: ['none', 'path://M250 150 L150 350 L350 350 Z'],

symbolSize: [15, 25],

symbolOffset: [0, 6]

},

3.改变坐标轴名称显示位置

//刻度标签文字的颜色

nameTextStyle: {

color: '#000000',

// 改变文字的位置

padding: [20, -30, -10, -15]

},

4.坐标轴加粗

axisLine: {

// 坐标轴颜色

lineStyle: {

color: 'rgb(209,174,74)',

width: 3

}

},

5.修改折线拐点标志的样式。

lineStyle: {

color: 'rgb(205, 148, 19)'

},

itemStyle: {

color: 'rgb(205, 148, 19)',

opacity: 'rgb(205, 148, 19)'

}

6.去除0但是刻度保留（当然写的判断是为了符合这个demo）

axisLabel: {

color: '#000000',

formatter: function (value) {

var texts = [];

if (value < 1) {

texts.push('');

}

else if (value <= 200) {

texts.push(value);

}

else if (value <= 300) {

texts.push(value);

}

else if (value <= 400) {

texts.push(value);

}

else {

texts.push(value);

}

return texts;

 

}

},

   

代码地址：https://github.com/ExtJSFantasy/miniprogram-echarts