101 lines
2.9 KiB
Vue
101 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<h1 style="text-align: center; width: 100%; font-size: 32px;">质量等级统计</h1>
|
|
<div
|
|
v-resize="init"
|
|
ref="chart"
|
|
style="min-width: 400px; min-height: 600px; width: 100%; height: 100%"
|
|
></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { generateWaterData } from "@/utils/water";
|
|
import Moment from "../utils/moment.zh_cn";
|
|
export default {
|
|
data() {
|
|
return {
|
|
data: [],
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
init() {
|
|
let myChart = echarts.init(this.$refs.chart)
|
|
setTimeout(function () {
|
|
|
|
var option = {
|
|
legend: {},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
showContent: false
|
|
},
|
|
dataset: {
|
|
source: [
|
|
['水质指标', '2012', '2013', '2014', '2015', '2016', '2017'],
|
|
['优', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
|
|
['良', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
|
|
['合格', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
|
|
['不合格', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
|
|
]
|
|
},
|
|
xAxis: {type: 'category'},
|
|
yAxis: {gridIndex: 0},
|
|
grid: {top: '55%'},
|
|
series: [
|
|
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
|
|
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
|
|
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
|
|
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
|
|
{
|
|
type: 'pie',
|
|
id: 'pie',
|
|
radius: '30%',
|
|
center: ['50%', '25%'],
|
|
emphasis: {focus: 'data'},
|
|
label: {
|
|
formatter: ' {@2012} ({d}%)'
|
|
},
|
|
encode: {
|
|
itemName: '指标统计',
|
|
value: '2012',
|
|
tooltip: '2012'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.on('updateAxisPointer', function (event) {
|
|
var xAxisInfo = event.axesInfo[0];
|
|
if (xAxisInfo) {
|
|
var dimension = xAxisInfo.value + 1;
|
|
myChart.setOption({
|
|
series: {
|
|
id: 'pie',
|
|
label: {
|
|
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
|
|
},
|
|
encode: {
|
|
value: dimension,
|
|
tooltip: dimension
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
myChart.setOption(option);
|
|
|
|
});
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
this.init();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |