效果图
<template>
<div id="report" style="width: 1200px;height: 700px;"></div>
</template>
<script>
// 引入基本模板
import * as echarts from 'echarts/lib/echarts'
// 引入柱状图组件
// 引入提示框和title组件
import {GridComponent, LegendComponent, ToolboxComponent,TooltipComponent,TitleComponent} from 'echarts/components';
import {LineChart,BarChart } from 'echarts/charts';
echarts.use([LineChart,BarChart,GridComponent, LegendComponent, ToolboxComponent,TooltipComponent,TitleComponent]);
let report;
export default {
name: 'WxReport',
components: {},
data() {
return {
}
},
mounted() {
if (!!report) {
console.log("dispose")
report.dispose();//销毁
}
this.$nextTick(()=>{
this.drawLine();
})
},
created() {
},
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
report = echarts.init(document.getElementById('report'))
// 绘制图表
report.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
saveAsImage: {show: true}
}
},
legend: {
data: ['20s', '30s', '60s', '平均响应']
},
xAxis: [
{
type: 'category',
data: ['9', '10', '11', '12', '13', '14', '15', '16', '17', '18'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '响应及时率',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value} %'
}
},
{
type: 'value',
name: '平均响应',
min: 0,
max: 60,
interval: 20,
axisLabel: {
formatter: '{value} s'
}
}
],
series: [
{
name: '20s',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' %';
}
},
data: [75, 70, 68, 65, 79, 65, 25, 57, 63, 59, 75]
},
{
name: '30s',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' %';
}
},
data: [85, 80.89, 78.92, 75.5, 89.3, 75.2, 35.3, 67.4, 73, 69.5, 85]
},
{
name: '60s',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' %';
}
},
data: [95, 90.89, 88.92, 85.5, 99.3, 85.2, 45.3, 77.4, 83.0, 79.5, 95]
},
{
name: '平均响应',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' s';
}
},
data: [35, 30, 28, 25, 39, 25, 25, 17, 23, 19, 35]
}
]
});
}
}
}
</script>