vue中使用echarts,可重绘
1. 安装插件echarts
npm install echarts -S
2. echarts组件
/components/XEcharts/echarts.vue
<template>
<div class="chart" ref="chart"></div>
</template>
<script>
export default {
name: "XEcharts",
data() {
return {
myChart: null,
};
},
props:["options"],
watch: {
options: {
handler (newValue) {
this.options = newValue
this.$nextTick(
this.resetChartData() //监听到了,重新定义数据,即重绘
)
},
deep: true
}
},
methods: {
drawMyChart() {
this.myChart.setOption(this.options);
},
resetChartData() {
this.myChart.clear();
this.myChart.setOption(this.options);
},
resizefun() {
this.$echarts.init(this.$refs.chart).resize(); //多个echarts则在此处添加
}
},
mounted() {
this.myChart = this.$echarts.init(this.$refs.chart);
this.drawMyChart();
window.onresize = () => this.resizefun;
window.addEventListener("resize", this.resizefun);
},
beforeDestroy() {
window.removeEventListener("resize", this.resizefun);
this.resizefun = null;
},
};
</script>
<style scoped>
.chart {
width: inherit;
height: inherit;
}
</style>
/components/XEcharts/index.js
import XEcharts from './XEcharts'
export default function install(Vue, opts) {
Vue.component(XEcharts.name, XEcharts)
}
3. 引入echarts,在main.js中引入全局注册
import XEcharts from '@/components/XEcharts'
Vue.use(XEcharts)
4. 应用
公共js文件
let commonJSon = {
// color: ["#0095E5", "#A783E5", "#5AD8A6", "#F9C738", "#EA836B", "#6671EE", "#62D9D3", "#EF9244"],
color: ["#0095E5", "#A783E5", "#5CA3FB", "#45CBC3 ", "#97C55C", "#29B6F6", "#36C987", "#F27C57", "#FBBC3A", "#D787E6", "#5AD8A6", "#F9C738", "#EA836B", "#6671EE", "#62D9D3", "#EF9244"],
// color: ["#29B6F6", "#36C987", "#F27C57", "#FBBC3A", "#D787E6", "#A783E5", "#5CA3FB", "#45CBC3", "#97C55C"],
title: {
text: "",
textStyle: {
fontSize: 16,
color: "#2E3239",
fontWeight: 400
},
left: "center"
},
legend: {
left: '16',
textStyle: {
color: "#86909C"
},
width: "auto",
itemWidth: 10, // 小方块尺寸
itemHeight: 10,
},
tooltip: {
textStyle: {
color: '#8F9195',
fontSize: 12,
},
axisPointer:{
type:"none"
},
trigger: 'axis',
formatter: params => {
// 获取xAxis data中的数据
let dataStr = `<div><p style="margin:0 8px 12px;color:#54575D;">${params[0].name}</p></div>`
params.forEach(item => {
dataStr += `<div>
<div style="margin: 0 8px;">
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
<span>${item.seriesName}</span>
<span style="float:right;margin-left:20px;">${item.value}</span>
</div>
</div>`
})
return dataStr
},
borderColor: "#fff",
}
};
export const echartsJson = {
bar: {
grid: {
left: '20px',
right: '20px',
bottom: '40px',
containLabel: true
},
legend: commonJSon.legend,
tooltip: commonJSon.tooltip,
color: commonJSon.color,
title: commonJSon.title,
barWidth: "20px",
xAxis: {
type: 'category',
data: [],
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(0,0,0,.25)",
}
},
axisLabel: {
color: "rgba(0,0,0,.45)",
fontSize: 12
}
},
yAxis: {
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: 'rgba(0,0,0,.15)',
width: 1,
type: 'solid'
}
},
axisLabel: {
color: "rgba(0,0,0,.45)",
fontSize: 12
}
},
series: [
{
data: [],
type: 'bar',
name: "series",
}
]
},
line: {
// color: ["#0095E5","#62D9AA", "#F7C536", "#E8755A", "#5AD8A6", "#F9C738", "#EA836B", "#6671EE", "#62D9D3", "#EF9244"],
color: commonJSon.color,
title: {
text: "",
textStyle: {
fontSize: 16,
color: "#2E3239",
fontWeight: 400
},
left: "center"
},
// tooltip: {
// trigger: 'axis'
// },
tooltip: commonJSon.tooltip,
legend: {
left: '16',
textStyle: {
color: "#86909C"
},
width: "auto",
itemWidth: 10, // 小方块尺寸
itemHeight: 10,
},
grid: {
left: '3%',
right: '4%',
组件中使用
<x-echarts ref="myCharts1" v-if="chartItem.type=== 'bar'" class="chartMain" :options="barJson"></x-echarts>
<script>
import { echartsJson } from "@/const/echarts/echarts"
export default {
name: 'wel',
data() {
return {
barJson: deepClone(echartsJson.bar),
};
},
methods(){
getBar(data) {
const subData = {
analysisDurationType: data || 1,
excludes: ["4005", "4006", "4009"],
}
proof(subData).then(res => {
const barList = res.data.data;
this.barJson.series=[];
const xLine = [];
const success = [];
const fail = [];
barList.forEach(item => {
xLine.push(item.type);
success.push({value:item.成功,color:"#29B6F6"});
fail.push({value:item.失败,color:"#D787E6"});
});
this.barJson.xAxis.data = xLine;
this.barJson.series.push({
data: success,
type: 'bar',
name: "成功",
stack:"1",
})
this.barJson.series.push({
data: fail,
type: 'bar',
name: "失败",
stack:"1",
})
})
},
},
created() {
this.getBar();
},
}