Vue使用ECharts的步骤

1.npm安装

npm install echarts

2.在使用的页面引入ECharts

import * as echarts from 'echarts';

3.获取dom容器、初始化ECharts实例对象

// 获取dom节点
var chartDom = document.querySelector( dom + " .chart");
// 初始化echarts可视化图放在哪个dom节点
var myChart = echarts.init(chartDom);

4.指定配置项和数据(option)

var option = {
                color: ["#2f89cf"],
                // 设置图标的标题
                title: {
                },
                // 图标的提示组件
                tooltip: {
                },
                // 图例组件   但是柱状图没有显示
                legend: {

                },
                // 网格配置  可以控制折线图、柱状图 、饼图的大小
                grid: {

                },
                // 工具箱组件  可以另存为图片等功能
                toolbox: {

                },
                xAxis: {
                    
                },
                yAxis: {
                    
                },
                // 系列图表配置  它决定着显示那种图表类型
                series: [
                    
                ]
            };

5.将配置项设置给ECharts实例对象

option && myChart.setOption(option);

6.// 让图跟着屏幕自适应

// 让图标跟着屏幕自适应
window.addEventListener("resize", function() {
    myChart.resize();
})

使用：

<template>
	<div class="visual-box">
		<h3 class="title">{{title}}</h3>
		<div class="visual-data" :class="`visual-data${i}`"></div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
    export default {
		props: {
			title: {
				type: String,
				default: () => '这是一个标题'
			},
			i: {
				type: Number,
			},
			option: {
				type: Object,
				default: {
					title: "2022年成交数",
					option: {
						backgroundColor: '#fff',//背景色
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						grid: {
							top: '5%',
							right: '5%',
							left: '8%',
							bottom: '20%'
						},
						xAxis: [{
							type: 'category',
							data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
							axisLine: {
								lineStyle: {
									color: '#D1D9EB'
								}
							},
							axisLabel: {
								margin: 10,
								color: '#A1A7B3',
								textStyle: {
									fontSize: 12
								},
							},
							axisTick: {
								show: false
							}
						}],
						yAxis: [
							{
								type: "value",
								name: '',
								nameTextStyle: {
									color: '#C1C6CF',
									fontSize: 12,
									align: "right",
									padding:5
								},
								axisLabel: {
									formatter:'{value}',
									color: '#A1A7B3',
									fontSize:12
								},
								axisTick: {
									show: false
								},
								axisLine: {
									show: false,
								},
								splitLine: {
									lineStyle: {
										color: '#D1D9EB',
										type:'dashed'
									}
								}
							},
						],
						series: [{
							type: 'bar',
							data: [80, 80, 97, 53, 95, 26, 72, 97, 53, 95, 26, 72],
							barWidth: '15px',
							itemStyle: {
								color:'rgb(38,80,180)',
								barBorderRadius: [2 ,2 ,0 ,0 ]
							},
						}]
					}
				},
			}
		},
        data: () => ({
            
        }),
        mounted() {
			this.visualBox1()
        },
        methods: {
			visualBox1() {
				// 获取dom节点
				var chartDom = document.querySelector(".visual-box" + ' ' + ".visual-data"+this.i)
				// 初始化echarts可视化图放在哪个dom节点
				var myChart = echarts.init(chartDom, null, {height: 180,});
				var option = this.option;
				option && myChart.setOption(option);
				// 让图标跟着屏幕自适应
				window.addEventListener("resize", function() {
				    myChart.resize();
				})
			},
			
		}
	}
</script>