粉丝管理 (三) -粉丝画像（echarts使用）

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官网——>文档——>配置项手册，根据需求进行配置筛选