echarts实现数据可视化

1.在全局安装echarts

cnpm install echarts -S

2.全局引用

import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

3.使用$echarts.init

<div style='width:800px;height=800px' red="chart"></div>

let myChart = this.$echarts.init(this.$refs.chart);    使用ref设置   $refs获取图表设置的位置并进行初始化 
//this.chart = this.$echarts.init(document.getElementById(this.id))

4.获取数据

let option = ...;  //数据的设置
myChart.setOption(option);

5.将图表挂载到页面上

 mounted() {
    this.init()
  },

6.主题的使用

//下载主题存为theme.js文件

//在使用echarts页面引入该文件
import {theme} from './Theme.js'

//在初始化组件时设置主题
let myChart = this.$echarts.init(this.$refs.chart,'macarons');

:legend="[‘零售额’,‘零售量’]"

<el-card>
	<template slot="header">
		{{ user.county }} 网络零售重点行业排名
	</template>
	<el-table :data="tableData" class="line2-table">
		<el-table-column label="行业" prop="industry"></el-table-column>
		<el-table-column label="零售额占比" prop="amountRate">
			<template v-slot="scope">
				{{ scope.row.amountRate !== null ?scope.row.amountRate+'%':'-' }}
			</template>
		</el-table-column>
		<el-table-column label="零售量占比" prop="countRate">
			<template v-slot="scope">
				{{ scope.row.countRate !== null ?scope.row.countRate+'%':'-' }}
			</template>
		</el-table-column>
	</el-table>
</el-card>

legend：图例

mixins:[resize];

.map() ==> 返回一个新的数组 pieData

.forEach() ==> 遍历数组，没有返回值

//PieData的处理：
if (temp && temp.name && temp.name.length) {
    let total = 0
    temp.value.forEach(item => { total = total + item })     //遍历数组计算总数

    this.pieData = temp.name.map((item, index) => {
        return {
            name: item,
            value: (temp.value[index] / total * 100).toFixed(2)       //求出各部分的占比
        }
    })

    this.pieBar = temp ? [temp.name, temp.value] : null
}

tooltip设置

tooltip: {
    formatter (params) {
        return params.seriesName + '<br>' + params.marker + params.name + '：' + params.data.value + '%'
    }
},  //hover时提示的信息   

watch – 用来监测Vue实例上的数据变动。