粉丝管理 (三) -粉丝画像(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
应用:

粉丝管理 (三) -粉丝画像(echarts使用)_第1张图片

第一步:默认安装在生产依赖(命令行窗口)-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官网——>文档——>配置项手册,根据需求进行配置筛选

你可能感兴趣的:(项目-vue-PC端,工具,vue知识,可视化,vue,数据可视化)