ECharts可视化图表库

基本的ECharts可视化图表库使用

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

1. 安装 ECharts

npm install echarts --save

2. 按需引入

在 plugins 文件夹中创建 echarts.js 文件进行按需引入需要的图表组件

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口
import * as echarts from 'echarts/core'
// 引入柱状图and折线图图表，图表后缀都为 Chart
import { LineChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import { GridComponent, TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
// 注册组件
echarts.use([
	GridComponent,
  	LineChart,
  	CanvasRenderer,
  	UniversalTransition,
	LabelLayout,
    TitleComponent,
    TooltipComponent,
    LegendComponent
])
// 导出
export default echarts

main.js 文件中进行注册

// 导入封装的 echarts 可视化图表库
import echarts from '@/plugins/echarts'

// 实例化 App
const app = createApp(App)
// 注册 echarts
app.config.globalProperties.$echarts = echarts

3. 项目应用

// 引入 echarts
import * as echarts from 'echarts/core';

export default {
	setup () {
        // 创建函数，页面刷新完成后调用此函数加载 echarts 组件
        const lineOption = () => {
            // 获取id容器
            const parkingChart = echarts.init(document.getElementById('outside'))
            // 配置项
            const option = {
                ...
            }
            // 复制
            parkingChart.setOption(option)
            // 根据页面大小自动响应图表大小
            window.addEventListener('resize', function () {
                parkingChart.resize()
            })
        }
	}
}

4. 去除柱状图坐标轴

单独去除某个

// X轴
xAxis: {
	type: 'category',
	data: ['2023','2022','2021'],
    // 坐标轴轴线
    axisLine: {
    	show: false
    },
    // 坐标轴刻度
    axisTick: {
    	show: false
    }
},
// Y轴
yAxis: {
    type: 'value',
	// 分隔线
	splitLine: {
		show: false 
	},
	// 坐标轴轴线
	axisLine: {
		show: false
    },
    // 坐标轴刻度
    axisTick: {
    	show: false
    },
    // 刻度标签
    axisLabel: {
    	show: false
    }
}

全部去除

xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2023', '2022', '2021'],
    // 去除 x轴 数据类型名称
    show: false
},
yAxis: {
    type: 'value',
	// 去除 y轴 标尺
	show: false
},

5. 修改柱状图颜色及宽度

xAxis: {
	type: 'category',
	data: ['2023','2022','2021'],
	axisLabel: {
        // 柱状图底部文字颜色
		color: "#232123",
    }
},
series: [
	{
		data: [2393,3947,4387],
        type: 'bar',
		// 修改柱状图样式
        itemStyle: {
            // 设置颜色值
            color: '#74608f'
        },
        // 设置每个柱状的宽度
        barWidth: 25,
    }
]

6. 修改柱状图边距

grid: {
    left: 0,
    right: 0,
    bottom: 0,
    top: 0,
    containLabel: true
},