//步骤一：创一个div标签内绑定id为mian；
<div id="main"></div>
//步骤二：methods创建drawChart（）方法
methods: {
drawChart() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("main"));
// 自定义一个颜色
var color2 = new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#2dcab1",
},
{
offset: 1,
color: "#3fb3f2",
},
]);
// 指定图表的配置项和数据
let option = {
tooltip: { //鼠标 触摸上显示数据提示
trigger: 'item'
},
title: { //设置标题
text: "总产值年度趋势",
left: "left",
textStyle: {
fontSize: 12,
fontWeight: 'bolder',
color: '#00D8FFFF' // 主标题文字颜色
},
},
xAxis: { //x轴设置
type: 'category',
data: ['2017', '2018', '2019', ],
axisLabel: { //x轴 值的字体样式
color: "#fff",
fontSize: "12",
interval: 0,
},
axisLine: { //x轴 线的样式
lineStyle: {
color: "rgba(14,79,173,0.62)",
width: 1,
},
},
axisTick: {
show: false,
},
},
grid: { //柱状图表设置距离容器上下左右的距离
left: "5",
right: "5",
bottom: "0",
top: "38",
containLabel: true,
},
yAxis: { //y轴设置
name: "(万元)",
type: 'value',
axisLabel: {
color: "#fff",
fontSize: "10",
interval: 0,
},
axisLine: {
lineStyle: {
color: "rgba(14,79,173,0.62)",
width: 1,
},
},
axisTick: {
show: false,
},
splitLine: { //y轴网格线的颜色的设置
lineStyle: {
color: "rgba(60,133,228,0.2)",
},
},
nameTextStyle: { //单位的设置
color: "#fff",
fontSize: "10",
padding: [0, 0, -8, -20],
},
},
series: [{
name: '访问来源',
data: [20, 26, 30],
type: 'bar',
barWidth: 10,//柱的宽度
showBackground: false,
itemStyle: {
color: color2,//使用了自定义的渐变色
barBorderRadius: 0,
},
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
},
//最后在 mounted调用
mounted() {this.drawChart();
}
