引入echarts
import * as echarts from "echarts";
折线图:
// 绘制折线图
drawLineChart() {
// 初始化
let myChart = echarts.init(document.getElementById('line-box'));
let options = {
title: {
subtext: '折线图',
right: 20,
top: 40,
},
tooltip: {
confine: true,
},
legend: {
right: 20,
top: 25,
color: '#0ff',
fontSize: 12,
data: ['年龄'],
show: true,
},
xAxis: [
{
type: 'category',
data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
}
],
yAxis: [
{
type: 'value',
name: '单位: 岁',
min: 0,
max: 20,
interval: 2,
},
// 第二个y轴
{
type: 'value',
name: '单位: 岁',
min: 0,
max: 30,
interval: 5,
}
],
series: [
{
name: '年龄',
color: '#0ff',
type: 'line',
data: [7, 8, 9, 10, 11, 12],
// 辅助线
markLine: {
data: [
{
name: '平均线',
type: 'average',
yAxis: 10,
itemStyle: {
color: '#f0f',
}
}
]
},
// 最大值、最小值
markPoint: {
data: [
{
type: 'max',
name: '最大值',
itemStyle: {
color: '#0f0',
}
},
{
type: 'min',
name: '最小值',
itemStyle: {
color: '#0f0',
}
}
]
},
}
]
}
myChart && myChart.setOption(options);
},
折线图效果:
echarts-折线图.gif
柱状图:
// 绘制柱状图
drawBarChart() {
// 初始化
let myChart = echarts.init(document.getElementById('bar-box'));
let options = {
title: {
subtext: '柱状图',
right: 20,
top: 40,
},
tooltip: {
confine: true,
},
legend: {
right: 20,
top: 25,
color: '#0ff',
fontSize: 12,
data: ['年龄'],
show: true,
},
xAxis: [
{
type: 'category',
data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
}
],
yAxis: [
{
type: 'value',
name: '单位: 岁',
min: 0,
max: 20,
interval: 2,
},
// 第二个y轴
{
type: 'value',
name: '单位: 岁',
min: 0,
max: 30,
interval: 5,
}
],
series: [
{
name: '年龄',
color: '#0ff',
type: 'bar',
data: [7, 8, 9, 10, 11, 12],
// 辅助线
markLine: {
data: [
{
name: '平均线',
type: 'average',
yAxis: 10,
itemStyle: {
color: '#f0f',
}
}
]
},
// 最大值、最小值
markPoint: {
data: [
{
type: 'max',
name: '最大值',
itemStyle: {
color: '#0f0',
}
},
{
type: 'min',
name: '最小值',
itemStyle: {
color: '#0f0',
}
}
]
},
}
]
}
myChart && myChart.setOption(options);
},
柱状图效果:
echarts-柱状图.gif
饼图:
// 绘制饼图
drawPieChart() {
// 初始化
let myChart = echarts.init(document.getElementById('pie-box'));
let options = {
title: {
subtext: '饼图',
right: 20,
top: 40,
},
tooltip: {
confine: true,
},
legend: {
right: 20,
top: 25,
color: '#0ff',
fontSize: 12,
show: true,
},
series: [
{
name: '分数',
color: ['#0ff', '#f90', '#ff0'],
type: 'pie',
// 圆环
radius: ['50%', '80%'],
label: {
show: true,
formatter: (v) => {
return `${v.name}: ${v.value}分`;
}
},
data: [
{
name: '数学',
value: 89,
},
{
name: '语文',
value: 76,
},
{
name: '英语',
value: 56,
}
],
}
]
}
myChart && myChart.setOption(options);
},
饼图效果:
echarts-饼图.gif
调用方法:
mounted() {
this.$nextTick(() => {
this.drawLineChart();
this.drawBarChart();
this.drawPieChart();
})
},
dom结构
<div class="echarts-view">
折线图
<div id="line-box"></div>
<hr>
柱状图
<div id="bar-box"></div>
<hr>
饼图
<div id="pie-box"></div>
</div>
css
#line-box,
#bar-box,
#pie-box {
width: 100%;
height: 300px;
}
