项目中我们想要数据可视化处理,并且简单明了多元化的展示统计数据。
这种情况下,数据图表展示成为了一种选择。那么图表展示工具Echarts、Highcharts也就呈现在我们眼前。
官方文档:
Echarts:https://www.echartsjs.com/zh/index.html
Highcharts:https://www.highcharts.com.cn/
在html中使用图表我们查看文档都知道,那么在vue项目中我们该如何使用图表
1.安装依赖
npm install echarts --save
2.盒子容器
<div id="date-chart" style="width:400px;height:400px"></div>
3.引入Echarts
import echarts from 'echarts'
4.图表实现
// 初始化
let mychart = echarts.init(document.getElementById('date-chart'))
// 图表设置
let option = {
animation: true,
tooltip: {
trigger: 'item',
formatter: "{b} : {c}次"
},
title: {
text: 24,
subtext: "总数",
x: "center",
y: "center",
textStyle: {
color: "#fff",
fontSize: 24,
fontWeight: "normal",
align: "center",
marginTop:'-20px',
width: "200px"
},
subtextStyle: {
color: "#fff",
fontSize:18,
fontWeight: "normal",
align: "center"
}
},
series: [{
type: "pie",
center: ["50%", "50%"],
radius: ["50%", "63%"],
color: ["#FEE449", "#00FFFF", "#00FFA8", "#9F17FF", "#FFE400", "#F76F01", "#01A4F7", "#FE2C8A"],
startAngle: 135,
labelLine: {
normal: {
length: 25
}
},
label: {
normal: {
formatter: "{b|{b}} {c|{c}}次 ",
backgroundColor: "rgba(255, 147, 38, 0)",
borderColor: "transparent",
borderRadius: 4,
rich: {
b: {
color: "#fff",
fontSize: 16,
lineHeight: 33
},
c: {
fontSize: 14,
// "color": "#eee"
}
},
textStyle: {
color: "#fff",
fontSize: 16
}
}
},
data: [{
name: "2020-2-5",
value: 3
}, {
name: "2020-2-6",
value: 2
}, {
name: "202-2-7",
value: 26
}, {
name: "2020-2-8",
value: 24
}, {
name: "2020-2-9",
value: 12
}, {
name: "2020-2-10",
value: 11
}, {
name: "2020-2-11",
value: 3
}, {
name: "2020-2-12",
value: 2
}]
}, {
type: "pie",
center: ["50%", "50%"],
radius: ["45%", "46%"],
hoverAnimation:false ,
label: {
show: false
},
data: [{
value: 24,
name: "总数",
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 1,
y2: 0,
type: "linear",
global: false,
colorStops: [{
offset: 0,
color: "#9F17FF"
}, {
offset: 0.2,
color: "#01A4F7"
}, {
offset: 0.5,
color: "#FE2C8A"
}, {
offset: 0.8,
color: "#FEE449"
}, {
offset: 1,
color: "#00FFA8"
}]
}
}
}
}]
}]
}
// 图表绘制
mychart.setOption(option)