102 lines
1.8 KiB
Vue
102 lines
1.8 KiB
Vue
<template>
|
|
<div>
|
|
<div
|
|
v-if="hasData"
|
|
id="index-chart"
|
|
ref="indexChart"
|
|
:style="{ width:width, height:height }"
|
|
/>
|
|
<a-empty v-else />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
export default {
|
|
data() {
|
|
return {
|
|
chartId:'index-chart-'
|
|
};
|
|
},
|
|
props: {
|
|
width: String,
|
|
height: String,
|
|
rawData: Array,
|
|
setting: Object,
|
|
},
|
|
watch: {
|
|
rawData(val, newVal) {
|
|
this.initChart();
|
|
},
|
|
},
|
|
computed: {
|
|
hasData() {
|
|
return this.rawData.length > 0;
|
|
},
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
let e = this.$refs['indexChart']
|
|
if(!e)return
|
|
let myChart = echarts.init(e);
|
|
const { title, xAxis, series, seriesName, seriesType } = this.setting;
|
|
let option = {
|
|
title: {
|
|
text: title,
|
|
left:'center'
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
xAxis: {
|
|
data: this.rawData.map(function (item) {
|
|
return item[xAxis];
|
|
}),
|
|
},
|
|
yAxis: {
|
|
type: "value"
|
|
},
|
|
|
|
dataZoom: [
|
|
{
|
|
// startValue: '2014-06-01'
|
|
},
|
|
{
|
|
type: "inside",
|
|
},
|
|
],
|
|
toolbox: {
|
|
left: "left",
|
|
feature: {
|
|
dataZoom: {
|
|
yAxisIndex: "none",
|
|
},
|
|
restore: {},
|
|
saveAsImage: {},
|
|
},
|
|
},
|
|
|
|
series: {
|
|
name: seriesName,
|
|
type: seriesType,
|
|
data: this.rawData.map(function (item) {
|
|
return item[series];
|
|
}),
|
|
|
|
},
|
|
};
|
|
console.log(option)
|
|
myChart.setOption(option);
|
|
},
|
|
},
|
|
mounted() {
|
|
// console.log(this.rawData)
|
|
|
|
this.initChart();
|
|
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |