直接上代码
<template>
<div id="app">
<div ref="barChart" class="bar-chart"></div>
</div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'app',
mounted() {
const dataCountChart = echarts.init(this.$refs.barChart);
const option = {
color: [ // 这里的颜色的顺序对应legend中data中的项
{
type: 'linear',
colorStops: [
{
offset: 0,
color: '#55A6FF',
},
{
offset: 1,
color: '#8ED2FF',
}
],
},
{
type: 'linear',
colorStops: [
{
offset: 0,
color: '#7E6FCA',
},
{
offset: 1,
color: '#BFB1FB',
}
],
},
{
type: 'linear',
colorStops: [
{
offset: 0,
color: '#1B91A3',
},
{
offset: 1,
color: '#6FE5DB',
}
],
}
],
title: { // 标题属性
text: '',
left: '20px',
textStyle: {
color: '#55a6ff',
fontSize: 17,
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
},
},
legend: { // 图标属性设置
itemHeight: 17,
itemWidth: 40,
left: '12.7%',
data: ['公众号1', '公众号2', '公众号3'],
},
grid: { // 整个统计图的位置
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: ['新增粉丝数', '净增粉丝数', '参与粉丝数', '完成粉丝数'],
splitLine: {
show: false,
},
}
],
yAxis: [
{
// type: 'value',
splitLine: {
show: true,
},
}
],
series: [
{
name: '公众号1',
type: 'bar',
barGap: 0,
data: [320, 332, 301, 334],
},
{
name: '公众号2',
type: 'bar',
barGap: 0,
data: [320, 332, 301, 334],
},
{
name: '公众号3',
type: 'bar',
barGap: 0,
data: [320, 332, 301, 334],
}
],
};
dataCountChart.setOption(option);
},
};
</script>
<style lang="less" scoped>
#app {
.bar-chart {
margin: 0 auto;
height: 500px;
width: 800px;
}
}
</style>