項目是原生小程序，現(xiàn)在要用圖表類的展示數(shù)據(jù)荐糜。
思考問題：
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種
小程序插件：
小程序開發(fā)者可在”小程序管理后臺-設置-第三方服務-插件管理“中，根據(jù)AppID查找需要的插件独令，并申請使用端朵。插件開發(fā)者在24小時內(nèi)通過后，小程序開發(fā)者可在小程序內(nèi)使用該插件燃箭。
在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中加入代碼，記得給圖表添加寬高壹罚，不然顯示不出來
<chart chart-class="chart" style="heigth: 500rpx" option="{{ channelOption }}" />
7.我用到的圖表類型有：環(huán)形圖葛作，餅圖，分組柱狀圖
環(huán)形圖的options：
const total = 600
const lala = '50%'
// 資產(chǎn)管理
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'], // 指定環(huán)的顏色
series: [
{
// name: 'Access From',
type: 'pie',
left: 'center',
radius: ['35%', '70%'], // 內(nèi)半徑猖凛，外半徑
itemStyle:{
normal:{
label:{
show: true,
formatter: '赂蠢：{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|虱岂}\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之間第岖，數(shù)值越大越平滑
}
},
}
]
}
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
