1.下载资源包

https://echarts.apache.org/zh/download.html

2.引入资源包

将资源包放入项目内
在这里插入图片描述

3.代码示例

<template><div style="width:100%;height:500rpx" id="line" ref="line"></div>
</template><script>import * as echarts from '@/config/echarts.min.js';export default {data() {return {chartDom: "",myChart: "",option: "",};},// onLoad() {// 	this.$nextTick(() => {// 		this.chartDom = document.getElementById("main");// 		this.myChart = echarts.init(this.chartDom);// 		this.initChart();// 	});// },mounted() {this.$nextTick(() => {this.initChart();});},methods: {initChart() {this.chartDom = document.getElementById("line");this.myChart = echarts.init(this.chartDom);// return;// this.chart = echarts.init(this.$el, "macarons");this.option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],yAxis: [{type: 'value'}],series: [{name: 'Direct',type: 'bar',emphasis: {focus: 'series'},data: [320, 332, 301, 334, 390, 330, 320]},{name: 'Email',type: 'bar',stack: 'Ad',emphasis: {focus: 'series'},data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Union Ads',type: 'bar',stack: 'Ad',emphasis: {focus: 'series'},data: [220, 182, 191, 234, 290, 330, 310]},{name: 'Video Ads',type: 'bar',stack: 'Ad',emphasis: {focus: 'series'},data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Search Engine',type: 'bar',data: [862, 1018, 964, 1026, 1679, 1600, 1570],emphasis: {focus: 'series'},markLine: {lineStyle: {type: 'dashed'},data: [[{type: 'min'}, {type: 'max'}]]}},{name: 'Baidu',type: 'bar',barWidth: 5,stack: 'Search Engine',emphasis: {focus: 'series'},data: [620, 732, 701, 734, 1090, 1130, 1120]},// {// 	name: 'Google',// 	type: 'bar',// 	stack: 'Search Engine',// 	emphasis: {// 		focus: 'series'// 	},// 	data: [120, 132, 101, 134, 290, 230, 220]// },// {// 	name: 'Bing',// 	type: 'bar',// 	stack: 'Search Engine',// 	emphasis: {// 		focus: 'series'// 	},// 	data: [60, 72, 71, 74, 190, 130, 110]// },// {// 	name: 'Others',// 	type: 'bar',// 	stack: 'Search Engine',// 	emphasis: {// 		focus: 'series'// 	},// 	data: [62, 82, 91, 84, 109, 110, 120]// }]};this.option && this.myChart.setOption(this.option);},},}
</script><style>
</style>