持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
公司项目的可视化图形库工具主要使用有：D3.js和ECharts
两个工具库各有优点
d3.js主要用在绘制知识图谱项目中
而echarts更多的是用在统计图表中，虽然D3在自定义上绘制图形优势明显，但在开发效率和功能性上，echarts，更为方便、快捷和易上手
下面说下封装了echarts的vue-echarts-v3组件库
1、安装
$ npm install --save echarts vue-echarts-v3
2、使用
我们按照下面UI稿设计，使用vue-echarts-v3进行开发柱形图的组件，
vue-echarts-v3支持大部分echarts的配置项和事件，基本满足大部分开发使用
根据UI稿，图形为横向的柱形图，渐变 加 阴影，有标题，右侧还有个选择框,
选择框可以考虑插槽slot，这样数据逻辑始终在父组件操作
2.1 引入
import IEcharts from 'vue-echarts-v3/src/full';
2.2 组件注册
柱形图所需要的数据通过props传入，相关请求和处理统一放在父组件中执行，子组件只负责渲染图表
设计图中所有图表，均有统一风格的标题，所以标题我们也需要通过props传入
components: { IEcharts,},props: { barData: Array, title: { type: String, default: 'xxxx统计', },},2.3 组件
<template> <div class="charts-container"> <div class="charts-title"> <h4 class="main-common-title">{{ title }}</h4> </div> <div class="charts-main"> <slot name="select"></slot> <IEcharts ref="bar" style="width: 100%; min-height: 280px" :option="bar"/> </div> </div></template>2.4 数据
echarts库一般可以直接引入，在dom上设置id或者ref，在mounted中获取到dom后，再去执行数据获取、图形绘制操作
如下：
mounted () { this.chart = echarts.init(document.getElementById('piemain')) this.setOptions()},在vue-echarts-v3中，我们可以把option放在computed缓存中，
当数据变化的时候，echarts图表就会重新绘制
注意： 柱形图的type用的是 pictorialBar,
如果设置为bar，根据官方文档是没有itemStyle相关配置的
computed: { bar() { return { title: {}, tooltip: { trigger: 'axis', formatter: '{b} <br/>{c}', }, legend: { show: false, }, grid: { top: 30, bottom: 0, left: 20, right: '15%', containLabel: true, }, xAxis: { type: 'value', splitLine: { lineStyle: { color: 'rgba(108, 128, 151, 0.3)', type: 'dashed', }, }, }, yAxis: { type: 'category', data: this.barData.map((v) => v.name), axisLabel: { color: '#999', width: 72, overflow: 'truncate', }, axisTick: { show: false, }, }, series: [ { type: 'pictorialBar', data: this.barData.map((v) => v.count), barWidth: 8, barMinHeight: 10, selectedMode: 'single', symbolOffset: [1, 0], // 图形相对于原本位置的偏移 symbol: 'rect', // 图形类型 select: { label: { color: '#007AFF', }, }, // 按照数据项分配调色盘中的颜色，每个数据项都使用不同的颜色 colorBy: 'data', itemStyle: { // 图形样式 }, }, ], }; },},2.5 渐变
在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradient
前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始.
第5个参数则是一个数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color不用多说肯定是表示颜色
在series配置中填写itemStyle渐变相关代码
import * as echarts from 'echarts';
itemStyle: { normal: { color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [ { offset: 0, color: '#66e1df' }, { offset: 1, color: '#005954' }, ]), },},2.6 柱状阴影
在数据中取最大值，在每个柱形图的位置再添加一个柱形条，只不过这个柱形条在之前的下面，且是最大高度（最大宽度）
先求最大值，得到最大值的数组
const countData = this.barData.map((v) => v.count);const maxNum = Math.max(countData);const maxArry = [...countData].fill(maxNum, 0, this.barData.length);
在series中添加以下代码
{ name: '', barGap: '-250%', type: 'bar', z: 0, data: maxArry, barWidth: '22px', itemStyle: { normal: { color: 'rgb(108, 128, 151, .1)', // 0% 处的颜色 }, },},3、事件
IEcharts组件有一个回调事件，
import IEcharts from 'vue-echarts-v3/src/full';0
event.dataIndex是数据的索引值，可以获取到点击的数据值
4、相关网站
1、echarts官网 https://echarts.apache.org/examples/zh/index.html
2、echarts的社区例子网站好像停了，这里有个替用的 https://www.isqqw.com/echartsdetail?id=15210
3、vue-echarts-v3 https://github.com/xlsdg/vue-echarts-v3
原文：https://juejin.cn/post/7101472305208885261