You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
199 lines
5.0 KiB
199 lines
5.0 KiB
<template>
|
|
<div class="chartWrap"
|
|
:style="{ width: width, height: height,'textAlign':'center',lineHeight: height,color:'#909399'}">
|
|
<div v-if="showChart" ref="mybar"></div>
|
|
<div v-else>暂无数据</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
require('echarts/theme/macarons')
|
|
import resize from './mixins/resize'
|
|
const animationDuration = 6000
|
|
export default {
|
|
mixins: [resize],
|
|
props: {
|
|
//图表数据
|
|
data: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
//图表宽
|
|
width: {
|
|
type: String,
|
|
default: "100%",
|
|
},
|
|
//图表高
|
|
height: {
|
|
type: String,
|
|
default: "350px",
|
|
},
|
|
//
|
|
axisPointerType:{
|
|
type: String,
|
|
default: "shadow",
|
|
},
|
|
//图表颜色
|
|
colors: {
|
|
type: Array,
|
|
default: () => {
|
|
return [
|
|
"#b3241d",
|
|
"#91cc75",
|
|
"#fac858",
|
|
"#ee6666",
|
|
"#73c0de",
|
|
"#3ba272",
|
|
"#fc8452",
|
|
"#9a60b4",
|
|
"#ea7ccc",
|
|
];
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
myChart: "",
|
|
showChart: true
|
|
};
|
|
},
|
|
watch: {
|
|
data: {
|
|
// 监听图表变化重新渲染图表
|
|
handler() {
|
|
this.initChart(this.$refs.mybar, this.data);
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
|
|
computed: {},
|
|
created() {},
|
|
mounted() {
|
|
// 初始化渲染
|
|
this.initChart(this.$refs.mybar, this.data);
|
|
},
|
|
methods: {
|
|
initChart(dom, currentData) {
|
|
if (Object.keys(currentData).length == 0) {
|
|
console.log("123")
|
|
this.showChart = false
|
|
return
|
|
}
|
|
//清空重新渲染
|
|
if (
|
|
this.myChart != null &&
|
|
this.myChart != "" &&
|
|
this.myChart != undefined
|
|
) {
|
|
this.myChart.dispose(); //销毁
|
|
}
|
|
// this.myChart = this.$echarts.init(dom);
|
|
this.myChart = echarts.init(this.$el, 'macarons')
|
|
let option = this.option(currentData);
|
|
this.myChart.setOption(option);
|
|
|
|
|
|
},
|
|
option(currentData) {
|
|
let seriesList = currentData.list.map((item) => {
|
|
return {
|
|
name: item.name || "",
|
|
type: item.type || "line", //不传默认为折线图
|
|
data: item.data,
|
|
...item
|
|
};
|
|
});
|
|
// 返回echarts配置参数
|
|
return {
|
|
|
|
grid: {
|
|
left: '20',
|
|
right: '20',
|
|
top: '40',
|
|
bottom: '20',
|
|
containLabel: true
|
|
},
|
|
|
|
color: this.colors, //自定义颜色
|
|
legend: {},
|
|
tooltip: { //提示框浮层内容格式器
|
|
// trigger: "axis",
|
|
// formatter: currentData.formatter, //自定义格式
|
|
trigger: currentData.trigger||'axis',
|
|
formatter:currentData.formatter,
|
|
axisPointer: {
|
|
type: this.axisPointerType,
|
|
},
|
|
textStyle: { //提示框内文字样式的设置
|
|
align: 'left'
|
|
}
|
|
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [0, 0, 0, 0]
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: currentData.x, //横坐标数据
|
|
splitArea: false,
|
|
splitLine: false,
|
|
axisLine: {
|
|
show: currentData.xShow,
|
|
lineStyle: {
|
|
color: "#338de3", //x轴线颜色
|
|
width: 1,
|
|
type: "solid",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
toolbox: {},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate:currentData.rotate||'',
|
|
show: true,
|
|
splitNumber: 15,
|
|
textStyle: {
|
|
color: "rgba(122,122,122,1)",
|
|
fontSize: "14",
|
|
},
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
splitArea: false,
|
|
splitLine: false,
|
|
// name: currentData.list[0].unit, //单位
|
|
axisLabel: {
|
|
formatter: "{value}", //显示格式
|
|
show: true,
|
|
textStyle: {
|
|
color: "rgba(122,122,122,1)",
|
|
fontSize: "12",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: currentData.yShow,
|
|
lineStyle: {
|
|
color: "#338de3", //y轴线颜色
|
|
width: 1,
|
|
type: "solid",
|
|
},
|
|
},
|
|
// interval: 0
|
|
},
|
|
series: seriesList, //每一条配置
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.chartWrap {
|
|
background-color: #fff;
|
|
}
|
|
</style>
|