03-粉丝管理-粉丝画像(echarts使用)
-
数据可视化图表(柱状图,饼状图,线形图,k线图,雷达图)
-
底层实现:canvas h5提供绘图的技术 但是API使用非常繁琐。
-
数据可视化插件:echarts 是百度开发一款插件。 highCharts 国外。
-
echarts官网 :https://www.echartsjs.com
-
使用步骤:
- 第一步:npm install echarts --save
- 第二步:import echarts from ‘echarts’
- 第三步:准备一个具备高宽的DOM容器
<div ref="bar" style="width: 600px;height:400px;"></div>
- 第四步:初始化echarts实例
const dom = this.$refs.bar const myEcharts = echarts.init(dom)
- 第五步:准备配置对象(参考示例)
const option = {}
- 第六步:使用配置
myEcharts.setOption(option)
- 如果需要自定义:参考echarts配置项手册
- https://www.echartsjs.com/zh/option.html
应用:
第一步:默认安装在生产依赖(命令行窗口)-200kb左右
npm i echarts
第二步:在使用组件src/views/fans/index.vue中的script里导入
import echarts from 'echarts'
第三步:准备一个具备高宽的DOM容器 :
组件正文内容处- 粉丝画像123
<el-tab-pane label="粉丝画像" name="photo">
<div ref="bar" style="width: 600px;height:400px;"></div>
</el-tab-pane>
第四步:初始化echarts实例
在使用组件src/views/fans/index.vue中-export defort的created里获取数据 & methods里初始化实例
//使用echarts必须在dom渲染完毕后,created-出现dom,mounted-渲染完毕
mounted(){
this.initBar()
},
methods(){
initBar(){
//初始化柱状图
const dom = this.$refs.bar
const myEcharts = echarts.init(dom)
//第五步:准备配置对象(参考示例)——什么样的配置 对应的去找 示例
const option = {
//对应的示例—— 柱状图~坐标轴刻度与标签对齐 样式
//示例配置选项如下
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}
]
}
//第六步:使用配置
myEcharts.setOption(option)
}
}
注意:
如果第五步的配置对象,不能满足需求,在echarts官网——>文档——>配置项手册,根据需求进行配置筛选