vue使用echarts参考:https://www.jianshu.com/p/b43b601349e6
zzz.png
<template>
<div style="display:block;">
<div ref="bar" :style="{width: '400px', height: '400px'}"></div>
<div ref="line" :style="{width: '1000px', height: '400px'}"></div>
<div ref="pie" :style="{width: '400px', height: '400px'}"></div>
</div>
</template>
<script>
import { success1, warning1, cancel1 } from "@/api/tips.js";
export default {
data() {
return {
color:["#d47a2f","#ec4f4f","#d64747","#8cd647","#119dae","#864fec","#9d5570",],
echart_option_pie: {},
echart_option_line: {},
echart_option_bar: {},
legend:['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
}
},
created() {
this.initOption();
},
mounted() {
this.drawLine();
this.drawPie();
this.drawBar();
},
methods: {
initOption() {
this.echart_option_pie = {
title: {
text: '课程内容分布',
left: 'center',
top: 30,
textStyle: {
color: '#333'
}
},
color:this.color,
series: [
{
avoidLabelOverlap: false,
type: 'pie', // 设置图表类型为饼图
radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
data: [ // 数据数组，name 为数据项名称，value 为数据项值
]
}
]
}
this.echart_option_line = {
tooltip: {
trigger: 'axis'
},
legend: {
padding:[20,50,0,0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
data: this.legend
},
grid: { x: 45, y: 145, x2: 25, y2: 40 },
xAxis: {
type: 'category',
axisTick: {
show: false,
},
axisLabel: {
color: '#119dae'
},
axisLine: {
lineStyle: {
color: 'rgba(12,102,173,.5)',
width: 2,
}
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: {
type: 'value',
name: "万元",
axisTick: {
show: false,
},
axisLabel: {
color: '#119dae'
},
axisLine: {
lineStyle: {
width: 2,
color: '#119dae',
}
},
},
series: []
}
this.echart_option_bar = {
tooltip: {
trigger: 'axis'
},
legend: {
padding:[20,50,0,0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
data: this.legend
},
grid: { x: 45, y: 145, x2: 25, y2: 40 },
xAxis: {
type: 'category',
axisTick: {
show: false,
},
axisLabel: {
color: '#119dae'
},
axisLine: {
lineStyle: {
color: 'rgba(12,102,173,.5)',
width: 2,
}
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: {
type: 'value',
name: "万元",
axisTick: {
show: false,
},
axisLabel: {
color: '#119dae'
},
axisLine: {
lineStyle: {
width: 2,
color: '#119dae',
}
},
},
series: []
}
},
drawBar(){
var color = ["#119dae","#9d5570","#d64747","#8cd647","#d47a2f","#864fec","#ec4f4f",]
var echarts = this.$echarts.init(this.$refs['bar'])
echarts.clear();
var all_series = [];
for (var i = 0; i <= 5; i++) {
var temp = {
name: this.legend[i],
type: 'bar',
lineWidth: 3,
symbol: 'circle',
symbolSize: '7',
itemStyle: {
label: { show: true },
normal: {
color: color[i],
lineStyle: {
color: color[i]
}
}
},
data: [21, 25, 27, 12, 22, 21, 25, 27, 12, 22, 42, 32],
}
all_series.push(temp);
}
this.echart_option_bar.series = all_series;
echarts.setOption(this.echart_option_bar, true);
},
drawLine() {
var color = ["#119dae","#9d5570","#d64747","#8cd647","#d47a2f","#864fec","#ec4f4f",]
var echarts = this.$echarts.init(this.$refs['line'])
echarts.clear();
var all_series = [];
for (var i = 0; i <= 5; i++) {
var temp = {
name: this.legend[i],
type: 'line',
lineWidth: 3,
symbol: 'circle',
symbolSize: '7',
itemStyle: {
label: { show: true },
normal: {
color: color[i],
lineStyle: {
color: color[i]
}
}
},
data: [21, 25, 27, 12, 22, 21, 25, 27, 12, 22, 42, 32],
}
all_series.push(temp);
}
this.echart_option_line.series = all_series;
echarts.setOption(this.echart_option_line, true);
},
drawPie() {
var echarts = this.$echarts.init(this.$refs['pie'])
echarts.clear();
this.echart_option_pie.series[0].data = [
{ value: 30, name: '前十大客户\n30%' },
{ value: 70, name: '其他客户\n70%' },
]
echarts.setOption(this.echart_option_pie, true);
}
}
}
</script>
<style scoped>
* {
box-sizing: border-box;
}
/* .a{
color: #ec4f4f
} */
</style>
网友评论