项目是原生小程序，现在要用图表类的展示数据。
思考问题：
1.自己写肯定不行，canvas花半天得，还有交互什么的，pass
2.echarts是大家都知道的，另外还有蚂蚁出的antV，有专门针对移动端的。蚂蚁的交互和色彩做的都很不错，echarts的色彩搭搭配相对antv就有点不太好看了
echarts链接：https://echarts.apache.org/examples/zh/index.html
antv链接：https://antv.vision/zh
3.我最后是用了echarts，没用antv。因为antv暂时不支持饼图的指示线
4.小程序引用echarts有2种
小程序插件：
小程序开发者可在”小程序管理后台-设置-第三方服务-插件管理“中，根据AppID查找需要的插件，并申请使用。插件开发者在24小时内通过后，小程序开发者可在小程序内使用该插件。
在app.json添加
"plugins": {
"echarts": {
"version": "2.1.1",
"provider": "wx1db9e5ab1149ea03"
}
}
echarts组件包：https://github.com/ecomfe/echarts-for-weixin
5.我最终选择了插件，原因：插件和组件包都会占用小程序的大小，插件相对来说引用方便，插件会自动更新。组件包会随着git版本的提交，要维护组件包，有点麻烦。
6.插件使用方法：
app.json引入插件
"plugins": {
"echarts": {
"version": "2.1.1",
"provider": "wx1db9e5ab1149ea03"
}
}
使用图表的页面的index.json文件引入该插件，我用的是echarts插件全部的版本，按需引入的暂时没搞懂，搞懂后更新文章
{
"usingComponents": {
"chart": "plugin://echarts/chart"
}
}
index.wxml中加入代码，记得给图表添加宽高，不然显示不出来
7.我用到的图表类型有：环形图，饼图，分组柱状图
环形图的options：
const total = 600
const lala = '50%'
// 资产管理
const assetsOption = {
title: {
zlevel: 0,
text: [
'{value|' + total + '台}',
'{name|已投放}'
].join('\n'),
top: 'center',
left: '48.5%',
textAlign: 'center',
textStyle: {
rich: {
value: {
color: '#474747',
fontSize: 16,
fontWeight: 'bold',
// lineHeight: 40,
},
name: {
color: '#666666',
fontSize: 14,
lineHeight: 20
},
},
color: '#696969'
},
subtext: `{value|巡检率${lala}}`,
subtextStyle: {
rich: {
value: {
color: '#666666',
fontSize: 12,
backgroundColor: 'rgba(255,255,255,0.6)',
width: 85,
height: 30,
borderRadius: 5,
}
}
}
},
tooltip: {
trigger: 'item'
},
// legend: {
// // top: '0%',
// left: 'center'
// },
color:['#13c2c2', '#5a8ef7'], // 指定环的颜色
series: [
{
// name: 'Access From',
type: 'pie',
left: 'center',
radius: ['35%', '70%'], // 内半径，外半径
itemStyle:{
normal:{
label:{
show: true,
formatter: '{b}：{c}台'
},
labelLine :{show:true}
}
},
avoidLabelOverlap: false,
label: {
show: true,
position: 'outside'
},
emphasis: {
label: {
show: true,
fontSize: '12',
fontWeight: 'bold'
}
},
labelLine: {
show: true
},
showEmptyCircle: true,
data: [
{ value: 200, name: '已巡检' },
{ value: 400, name: '未巡检' },
]
}
]
}
image.png
饼图options:
const channelOption = {
title: {
// text: 'Referer of a Website',
// subtext: 'Fake Data',
left: 'center',
textStyle: {
color: '#999',
fontWeight: 'normal',
fontSize: 14
}
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'horizontal',
// left: 'left'
},
series: [
{
// name: 'Access From',
type: 'pie',
radius: '50%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
data: [
{name: '测试1'， value: 10},
{name: '测试2'， value: 20}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
alignTo: 'edge', // 觉得指示线太长的看这里
formatter: '{name|{b}}\n{value|{c}}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
value: {
fontSize: 10,
color: '#999'
}
},
position: 'outer'
},
labelLine: {
normal: {
// length: 100,
// length2: 0,
maxSurfaceAngle: 80, // 指示线的弯曲程度，一般设置0-90之间最为合适
smooth: 0.5, // 指示线的平滑程度，0-1之间，数值越大越平滑
}
},
}
]
}
image.png
柱状图options：
const productOption = {
legend: {},
tooltip: {},
dataset: {
source: productData
},
dataZoom : [ // 移动端手机宽度有限，添加横向滑动
{
type: 'slider',
show: true,
start: 0,
end: 30,
xAxisIndex: [0],
},
],
xAxis: {
type: 'category',
axisLabel:{
interval: 0,
rotate:40
},
data: xTitle
},
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: '#1890ff'
}
}
},
{
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: '#2fc25b'
}
}
}
]
}
image.png