echarts 折线图 柱图 封装
components/echarts/index.vue 组件内容
<!-- 重叠柱状图 -->
<template>
<div ref="chart" :style="styleCfg" />
</template>
<script>
export default {
name: 'EchartIndex',
props: {
option: {
default: () => {},
type: Object
},
width: {
default: 'auto',
type: String | Number
},
height: {
default: '300',
type: String
},
autoHeight: {
default: false,
type: Boolean
},
minWidth:{
default:'',
type:String
}
},
data() {
return {
myChart: ''
};
},
computed: {
styleCfg() {
let width = isNaN(Number(this.width)) ? this.width : `${this.width}px`;
let height = isNaN(Number(this.height))
? this.height
: `${this.height}px`;
let returnStyle=`width: ${width}; height: ${height}; `
if(this.minWidth){
returnStyle+='min-width:'+this.minWidth;
}
return returnStyle;
}
},
watch: {
height(newval) {
this.$refs.chart.style.height = newval;
this.resize();
},
option: {
handler(a, b) {
this.$forceUpdate();
this.myChart && this.myChart.setOption(a,true);
},
immediate: true,
deep: true
}
},
created() {},
mounted() {
this.draw();
window.addEventListener('resize', this.cuntHeight);
},
methods: {
cuntHeight() {
if (!this.autoHeight) return;
this.$nextTick(() => {
if (!this.$refs.chart || !this.$refs.chart.parentNode) return;
let num = this.$refs.chart.parentNode.clientHeight - 10;
// console.log(num, 1234);
this.$refs.chart.style.height = num + 'px';
this.resize();
});
},
draw() {
this.myChart = this.$echarts.init(this.$refs.chart);
this.myChart.getZr().on('click', param => { // 解决折线图没有拐点也有点击事件
const point = [param.offsetX, param.offsetY]
if (this.myChart.containPixel('grid', point)) { // 判断点击事件是否在图形区域内
let xIndex = this.myChart.convertFromPixel({seriesIndex: 0}, point)[0] // 拿到x轴坐标
let option = this.myChart.getOption()
this.$emit('zrOnClick', option, xIndex);
}
})
this.myChart.on('click', param => {
this.echartOnClick(param);
});
this.myChart.on('mouseover', param => {
this.echartOnMouseover(param);
});
this.myChart.on('mouseout', param => {
this.echartOnMouseout(param);
});
this.myChart.on('legendselectchanged',param =>{
this.echartOnLegendselectchanged(param);
})
this.myChart.setOption(this.option);
this.cuntHeight()
},
echartOnClick(param) {
this.$emit('echartOnClick', param);
},
echartOnLegendselectchanged(param) {
this.$emit('echartOnLegendse', param);
},
echartOnMouseover(param) {
this.$emit('echartOnMouseover', param);
},
echartOnMouseout(param) {
this.$emit('echartOnMouseout', param);
},
setOption(param) {
this.myChart && this.myChart.setOption(param);
},
init() {
this.myChart && this.myChart.setOption(this.option);
},
resize() {
this.myChart = this.$echarts.init(this.$refs.chart);
this.myChart.resize();
},
}
};
</script>
<style scoped>
.no-data{
position: absolute;
display: flex;
width: 100%;
height: 100%;
align-items: center;
text-align: center;
}
p{
flex: 1;
}
</style>
引用
<div style="padding:10px 20px">
<chartline ref="myCharts" :option="_options2" width="100%" :minWidth="'360px'" :height="'200px'" :autoHeight="false"></chartline>
</div>
computed:{
_options() {
let custSerises=[]
this.busbar_data.length&&this.busbar_data.forEach((item,index)=>{
custSerises.push({
name: item.name,
type: 'line',
//stack:"test",
emphasis:{
lineStyle:{
// width:3,
// color:"red"
},
itemStyle:{
borderWidth:4
}
},
symbolSize:1,
lineStyle:{
width:2
},
data: item.data_value,
smooth:true
})
})
const op = {
tooltip: {
trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// },
//解决折线图tooltip展示不全问题
position:(pos,params,el,elRect,size)=>{
var obj = {top:10};
obj[['left,right'][+(pos[0] < size.viewSize[0] / 2)]] = 30
return obj
},
backgroundColor: "#fff", // 提示框背景颜色
textStyle: {
fontSize: 14,
color: "#505D6F",
},
// formatter:(params)=>{
// let str =""
// params.length&¶ms.forEach(e=>{
// str+=`
// ${e.marker} ${e.seriesName} : ${e.value}
// `
// })
// // console.log(params)
// return `
// ${params[0].name}
// ${str}
// `
// }
},
// areaStyle:{
// normal:{
// color: new echarts.graphic.LinearGradient(
// 0,0,0,1,[
// {offset:0.98,color:'rgba(25,163,223,0)'},
// {offset:0,color:'rgba(25,163,223,0.3)'},
// // {offset:0.98,color:'rgba(5,213,255,1)'},
// // {offset:0,color:'rgba(5,213,255,0)'},
// ],false
// ),
// }
// },
legend: {
data: ["A相电压","B相电压","C相电压"],
show:true,
left: '50px',
top:"0px",
// width:"100%",
orient:"horizontal",
itemWidth:14,
itemHeight:4,
icon :"rect",
padding:10
},
grid: [
{
right: '10px',
bottom:"20px",
left:"60px",
top:"10px"
}
],
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
color:["#3C8782","#3A82D3","#68CD99","#E6A55D","#43D8FD","#1562B8"],
xAxis: {
type: 'category',
boundaryGap: true,
// axisLabel :{
// interval:0,
// rotate:'70',//旋转度数
// },
axisLabel: {
showMaxLabel: true,
color:"rgb(119,119,119)",
},
data: this.busbar_data.time || []
,
axisPointer: {
snap: true
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: "rgb(60,74,85)",
type:"dashed"
}
},
splitLine: {
show: false,
lineStyle: {
color: "rgb(60,74,85)",
type:"dashed"
}
}
},
yAxis: {
name:"V",
nameLocation:"end",
max:(value)=>{
return parseInt(value.max+(value.max*0.05))
},
min: function (value) {
return parseInt(value.min - (value.min*0.05));
},
type: 'value',
minInterval:1,
axisLabel: {
showMaxLabel: true,
color:"rgb(31,31,31)",
// axisLabel:{
formatter:"{value} V"
// }
},
nameTextStyle:{
color:"rgb(31,31,31)"
},
axisPointer: {
snap: true
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: "rgb(60,74,85)"
}
},
splitLine: {
show: false,
lineStyle: {
color: "rgb(60,74,85)",
type:"dashed"
}
},
},
series: [
{
name: "A相电压",
type: 'line',
//stack:"test",
emphasis:{
lineStyle:{
// width:3,
// color:"red"
},
itemStyle:{
borderWidth:4
}
},
symbolSize:1,
lineStyle:{
width:2
},
data: this.busbar_data.ua,
smooth:true
},
{
name: "B相电压",
type: 'line',
//stack:"test",
emphasis:{
lineStyle:{
// width:3,
// color:"red"
},
itemStyle:{
borderWidth:4
}
},
symbolSize:1,
lineStyle:{
width:2
},
data: this.busbar_data.ub,
smooth:true
},
{
name: "C相电压",
type: 'line',
//stack:"test",
emphasis:{
lineStyle:{
// width:3,
// color:"red"
},
itemStyle:{
borderWidth:4
}
},
symbolSize:1,
lineStyle:{
width:2
},
data: this.busbar_data.uc,
smooth:true
},
]
};
return _.merge(op, this.options);
},
}