<template>
<div :class="className" :style="{height:height,width:width}" id="myChart1" />
</template>
<script>
import * as echarts from 'echarts';
export default {
// mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '21vh'
},
chartData: {
type: Array,
required: true
}
},
data() {
return {
timer: 0,
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOption(val)
// this.setOptions(val)
}
}
},
mounted() {
this.initChart();
},
beforeDestroy() {
},
methods: {
initChart() {
var totalFlowRate = echarts.init(document.getElementById('myChart1'));
var totalFlowRateOption = {
animation: false,
tooltip: {
show: false
},
grid: {
left: 30,
right: 15,
botom: 20,
top: 15
},
legend: {
bottom: -5,
data: ['学习宣传理论政策', '培育践行主流价值', '扎实推进文明创建', '大力弘扬时代新风', '丰富活跃文化生活', '深化开展志愿服务'],
textStyle: { //图例文字的样式
color: '#A9D5E8',
fontSize: 12
}
},
xAxis: {
boundaryGap: false,
splitLine: {
show: false
},
axisLabel: {
color: "#8590A4",
textStyle: {
fontSize: 12,
fontWeight: 400,
},
},
/*网格线*/
axisLine: {
// 轴线
show: true,
lineStyle: {
color: "#56678D", //y轴线的颜色(若只设置了y轴线的颜色,未设置y轴文字的颜色,则y轴文字会默认跟设置的y轴线颜色一致)
width: 1, //y轴线的宽度
type: "solid" //y轴线为实线
},
// color: '#268C8C',
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: {
boundaryGap: false,
min: 0,
max: 250,
axisTick: {
// 轴刻度
show: false,
},
axisLabel: {
color: "#8590A4",
textStyle: {
fontSize: 12,
fontWeight: 400,
},
},
splitLine: {
// 网格线
show: true,
lineStyle: { //分割线
color: "#30436D",
width: 1,
type: "dashed" //dotted:虚线 solid:实线
}
},
axisLine: {
// 轴线
show: false,
lineStyle: {
color: "#fff", //y轴线的颜色(若只设置了y轴线的颜色,未设置y轴文字的颜色,则y轴文字会默认跟设置的y轴线颜色一致)
width: 1, //y轴线的宽度
type: "solid" //y轴线为实线
},
},
},
series: [{
name: '学习宣传理论政策',
type: 'line',
data: [20, 25, 32, 41, 50, 53, 63, 66, 78, 90, 110, 115, ],
showSymbol: false,
itemStyle: {
normal: {
lineStyle: {
color: '#477BFF' /*折线的颜色*/
},
color: "#477BFF" /*图例(legend)的颜色,不是图例说明文字的颜色*/
}
},
},
{
name: '培育践行主流价值',
type: 'line',
data: [50, 60, 80, 120, 140, 86, 96, 102, 78, 90, 120, 150, ],
showSymbol: false,
itemStyle: {
normal: {
lineStyle: {
color: '#47D1CB' /*折线的颜色*/
},
color: "#47D1CB" /*图例(legend)的颜色,不是图例说明文字的颜色*/
}
},
},
{
name: '扎实推进文明创建',
type: 'line',
data: [60, 80, 120, 90, 86, 110, 160, 123, 110, 68, 86, 95],
showSymbol: false,
itemStyle: {
normal: {
lineStyle: {
color: '#6F47FF' /*折线的颜色*/
},
color: "#6F47FF" /*图例(legend)的颜色,不是图例说明文字的颜色*/
}
},
},
{
name: '大力弘扬时代新风',
type: 'line',
data: [120, 150, 182, 160, 123, 190, 163, 145, 169, 210, 169, 160],
showSymbol: false,
itemStyle: {
normal: {
lineStyle: {
color: '#FFCB47' /*折线的颜色*/
},
color: "#FFCB47" /*图例(legend)的颜色,不是图例说明文字的颜色*/
}
},
},
{
name: '丰富活跃文化生活',
type: 'line',
data: [150, 182, 160, 123, 190, 163, 145, 250, 210, 169, 160, 210],
showSymbol: false,
itemStyle: {
normal: {
lineStyle: {
color: '#FF477B' /*折线的颜色*/
},
color: "#FF477B" /*图例(legend)的颜色,不是图例说明文字的颜色*/
}
},
},
{
name: '深化开展志愿服务',
type: 'line',
data: [120, 148, 169, 110, 160, 132, 189, 119, 155, 129, 210, 223],
showSymbol: false,
itemStyle: {
normal: {
lineStyle: {
color: '#59DBFF' /*折线的颜色*/
},
color: "#59DBFF" /*图例(legend)的颜色,不是图例说明文字的颜色*/
}
},
}
]
};
totalFlowRate.setOption(totalFlowRateOption);
},
}
}
</script>
"vue": "2.6.10", "echarts": "^5.2.0",