139 lines
2.7 KiB
Vue
139 lines
2.7 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>
|
|
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, yRange } = this.setting;
|
|
let option = {
|
|
title: {
|
|
text: title,
|
|
left:'center'
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
xAxis: {
|
|
data: this.rawData.map(function (item) {
|
|
return item[xAxis];
|
|
}),
|
|
},
|
|
yAxis: {
|
|
min: yRange[0] - (yRange[1] - yRange[0]) * 0.05,
|
|
max: yRange[1] + (yRange[1] - yRange[0]) * 0.05,
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
dataZoom: [
|
|
{
|
|
// startValue: '2014-06-01'
|
|
},
|
|
{
|
|
type: "inside",
|
|
},
|
|
],
|
|
toolbox: {
|
|
left: "left",
|
|
feature: {
|
|
dataZoom: {
|
|
yAxisIndex: "none",
|
|
},
|
|
restore: {},
|
|
saveAsImage: {},
|
|
},
|
|
},
|
|
visualMap: {
|
|
show: true,
|
|
top: 40,
|
|
right: 50,
|
|
type:'piecewise',
|
|
text:'图例',
|
|
pieces: [
|
|
{
|
|
gte: yRange[0],
|
|
lte: yRange[1],
|
|
color: '#0000ff',
|
|
},
|
|
{
|
|
gt: yRange[1],
|
|
color: "#ff0000",
|
|
},
|
|
{
|
|
gt: yRange[1],
|
|
color: "#ff0000",
|
|
},
|
|
],
|
|
categories:['合格','不合格'],
|
|
outOfRange: {
|
|
color: "#0000ff",
|
|
},
|
|
},
|
|
series: {
|
|
name: seriesName,
|
|
type: seriesType,
|
|
data: this.rawData.map(function (item) {
|
|
return item[series];
|
|
}),
|
|
markLine: {
|
|
silent: true,
|
|
data: [
|
|
{
|
|
yAxis: yRange[0],
|
|
},
|
|
{
|
|
yAxis: yRange[1],
|
|
},
|
|
],
|
|
},
|
|
},
|
|
};
|
|
console.log(option)
|
|
myChart.setOption(option);
|
|
},
|
|
},
|
|
mounted() {
|
|
// console.log(this.rawData)
|
|
|
|
this.initChart();
|
|
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |