vue集成echarts，自定义各种图表验收
<template>
<div class="homepage-count">
<br><br><br>
<el-row>
<el-col :span="6">
<div id="main1" ref="chart1"></div>
</el-col>
<el-col :span="6">
<div id="main1" ref="chart2"></div>
</el-col>
<el-col :span="6">
<div id='main1' ref='chart3'></div>
</el-col>
<el-col :span="6">
<div id='main1' ref='chart4'></div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div id='main1' ref='chart5'></div>
</el-col>
<el-col :span="12">
<div id='main1' ref='chart6'></div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
</el-col>
<el-col :span="12">
</el-col>
</el-row>
<el-row>
<el-col :span="12">
</el-col>
<el-col :span="12">
</el-col>
</el-row>
</div>
</template>
<script>
import axios from 'axios'
var echarts = require("echarts");
export default {
data() {
return {
}
},
methods: {
ec1(){
echarts.init(this.$refs.chart1).setOption({
title: {
text: '风险数据失控统计',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{value: 43, name: '失控'},
{value: 53, name: '未失控'},
],
itemStyle: {
emphasis:{
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal:{
color:function(params) {
var colorList = [
'#FF4040', '#63B8FF',
];
return colorList[params.dataIndex]
}
}
}
}
]
})
},
ec2(){
let ec = echarts.init(this.$refs.chart2);
ec.setOption({
legend: {},
tooltip: {},
dataset: {
dimensions: ['product', '失控', '未失控'],
source: [{'失控':43,'未失控':66}]
},
xAxis: {type: 'category'},
yAxis: {},
series: [
{type: 'bar',color:'#FF4040'},
{type: 'bar',color:'#63B8FF'}
]
})
},
ec3(){
let ec = echarts.init(this.$refs.chart3);
ec.setOption({
legend: {},
tooltip: {},
dataset: {
dimensions: ['product', '等级1', '等级2', '等级3','等级4'],
source: [{'等级1':32, '等级2':43, '等级3':54,'等级4':65}]
},
xAxis: {type: 'category'},
yAxis: {},
series: [
{type: 'bar',color:'#0000FF'},
{type: 'bar',color:'#EEEE00'},
{type: 'bar',color:'#FF6100'},
{type: 'bar',color:'#FF0000'}
]
})
},
ec4(){
echarts.init(this.$refs.chart4).setOption({
title: {
text: '风险数据失控统计',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{value: 43, name: '等级1'},
{value: 53, name: '等级2'},
{value: 43, name: '等级3'},
{value: 23, name: '等级4'}
],
itemStyle: {
emphasis:{
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal:{
color:function(params) {
var colorList = [
'#0000FF', '#EEEE00', '#FF6100', '#FF0000'
];
return colorList[params.dataIndex]
}
}
}
}
]
})
},
ec5(){
let ec = echarts.init(this.$refs.chart5);
ec.setOption({
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['等级1', '等级2', '等级3', '等级4']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2021.05.01','2021.05.02','2021.05.03','2021.05.04','2021.05.05','2021.05.06','2021.05.07']
},
yAxis: {
type: 'value'
},
series: [
{
name: '等级1',
type: 'line',
// stack: '总量',
symbol: 'circle',
smooth: true,
symbolSize: 8,
itemStyle: {
normal: {
color: '#0000FF',
borderColor: '#9900FF',
}
},
data: [
33,52,523,234,532,23,235
]
},
{
name: '等级2',
type: 'line',
// stack: '总量',
symbol: 'circle',
smooth: true,
symbolSize: 8,
itemStyle: {
normal: {
color: '#EEEE00',
borderColor: '#9900FF',
}
},
data: [
432,543,65,74,74,745
]
},
{
name: '等级3',
type: 'line',
// stack: '总量',
symbol: 'circle',
smooth: true,
symbolSize: 8,
itemStyle: {
normal: {
color: '#FF6100',
borderColor: '#9900FF',
}
},
data: [
456,754,645,765,765,87,45
]
},
{
name: '等级4',
type: 'line',
// stack: '总量',
symbol: 'circle',
smooth: true,
symbolSize: 8,
itemStyle: {
normal: {
color: '#FF0000',
borderColor: '#9900FF',
}
},
data: [
64,756,867,56,456,87,34
]
}
]
})
},
ec6(){
let ec = echarts.init(this.$refs.chart6);
ec.setOption({
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2021.05.01','2021.05.02','2021.05.03','2021.05.04','2021.05.05','2021.05.06','2021.05.07'],
['等级1', 33,52,523,234,532,23,235],
['等级2', 432,543,65,74,74,745],
['等级3', 456,754,645,765,765,87,45],
['等级4', 64,756,867,56,456,87,34]
]
},
xAxis: [
{type: 'category', gridIndex: 0},
{type: 'category', gridIndex: 1}
],
yAxis: [
{gridIndex: 0},
{gridIndex: 1}
],
grid: [
{bottom: '55%'},
{top: '55%'}
],
series: [
// These series are in the first grid.
{type: 'bar', seriesLayoutBy: 'row',color:'#0000FF'},
{type: 'bar', seriesLayoutBy: 'row',color:'#EEEE00'},
{type: 'bar', seriesLayoutBy: 'row',color:'#FF6100'},
{type: 'bar', seriesLayoutBy: 'row',color:'#FF0000'},
// These series are in the second grid.
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1,color:'#0000FF'},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1,color:'#EEEE00'},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1,color:'#FF6100'},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1,color:'#FF0000'}
]
})
}
},
mounted(){
this.ec1();
this.ec2();
this.ec3();
this.ec4();
this.ec5();
this.ec6();
},
created() {
}
}
</script>
<style lang="scss" scoped>
.homepage-count {
background: #EBEEF5;
#main1{
width: 100%;
height: 400px;
border:2px solid #DCDFE6;
}
}
</style>
