ECharts,一个使用 JavaScript 实现的开源可视化库。提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
vue中使用echarts
- 安装:yarn add echarts
- 封装:myCharts.js
- 引入:main.js
- 使用
// myCharts.js
/**
* @Author: brady
* @Date: 2019/8/30
* @Last Created time: 16:05:23
* @Description: 各种画echarts图表的方法都封装在这里
*/
import echarts from 'echarts'
const install = Vue => {
Object.defineProperties(Vue.prototype, {
$chart: {
get () {
return {
basePie: id => {
this.chart = echarts.init(document.getElementById(id))
this.chart.clear()
const optionData = {
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
]
}
]
}
this.chart.setOption(optionData)
},
}
}
}
})
}
export default {
install
}
// main.js
// import echarts from 'echarts' // 全局引入echarts
import echarts from './assets/js/myCharts' // 单独封装echarts
// Vue.prototype.$echarts = echarts
Vue.use(echarts)
<!-- Demo -->
<template>
<div id="demo">
<!-- echarts应用 -->
<div id="echart"></div>
</div>
</template>
<script>
export default {
name: 'Demo',
data() {
return {}
},
mounted() {
this.$chart.basePie('echart')
},
}
</script>
<style scoped>
#echart {
padding: 30px;
width: 300px;
height: 300px;
}
</style>