Echart.vue
<template>
<div ref="main" :style="{width,height}"></div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts/src/chart/pie'
export default {
name: 'EChart',
props: {
title: {
type: String,
default: '',
},
options: {
type: Object,
default: function () {
return {}
},
},
width: {
type: String,
default: '100px',
},
height: {
type: String,
default: '100px',
},
},
data() {
return {
instance: null,
}
},
computed: {
echartsWidth: function () {
return this.width;
}
},
watch: {
width: {
handler: function (newval) {
console.log("监听宽度", newval)
},
immediate: true, //首次加载时执行监听
},
options: {
handler: function (newval) {
console.log('options变化了', newval);
// this.instance.setOption(newval)
},
immediate: true, //首次加载时执行监听
deep: true
},
},
mounted() {
const instance = echarts.init(this.$refs.main)
instance.setOption(this.options)
instance.on('click', e => {
this.$emit('chartClick', e)
})
this.instance = instance
},
}
</script>
main.js中全局注册组件
import ECharts from './components/EChart'
Vue.component('chart', ECharts)
使用组件
<chart :options="bar" height="350px" width="850px" />
<script>
export default{
data(){
return {
bar: {
title: {
text: '故障',
},
tooltip: {},
xAxis: {
axisLabel: {
interval: 0,
rotate: 30,
},
data: [
'主电路系统',
'牵引控制系统',
'辅助系统',
'通信控制系统',
'照明系统',
'附属设备系统',
'车门系统',
'车钩系统',
'客室系统',
'转向架系统',
'供风和制动系统',
'司机室系统',
'乘客信息系统',
'空调系统',
],
},
yAxis: {},
series: [{
name: '故障',
type: 'bar',
barWidth: "30%",
// itemStyle: {
// color: '#9BD55A'
// },
showBackground: true,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#83bff6'
},
{
offset: 0.5,
color: '#188df0'
},
{
offset: 1,
color: '#188df0'
}
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#2378f7'
},
{
offset: 0.7,
color: '#2378f7'
},
{
offset: 1,
color: '#83bff6'
}
])
}
},
data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20, 4],
}
]
}
}
}
}
</script>
