极致呈现系列之：Echarts柱状图的创意设计与数字美学的完美平衡

2023-06-20 16:14| 来源: 网络整理| 查看: 265

先看下最终效果在这里插入图片描述

目录数字之美：Echarts柱状图的基础应用形色俱佳：Echarts柱状图的样式美化与创意设计独具匠心：Echarts柱状图的柱体形状自定义动感十足：Echarts柱状图的交互动画实现数字排序的艺术：Echarts柱状图的数据排序技巧前面我花了两篇博客的时间详细介绍了如何在 Vue3中使用Echarts图表和 Echarts中的配置项的详细介绍，这一篇博客我想结合前面两篇博客的内容，来实现对Echarts柱状图的美化与数据交互。

数字之美：Echarts柱状图的基础应用

前面我们已经讲过了，要在Vue中使用Echarts，我们必须先安装和引入，我们新建一个vue3工程，安装Echarts并引入

安装Echarts npm install echarts --save 引入Echarts，这里我就局部引入了，新建一个VueChart.vue组件，在这个组件中引入 import * as echarts from 'echarts'; 在该组件的模板中新建一个div 定义一个数组，用于存放数据 const chart = ref(null) const data = [ { name: 'Mon', value: 820 }, { name: 'Tue', value: 932 }, { name: 'Wed', value: 901 }, { name: 'Thu', value: 934 }, { name: 'Fri', value: 1290 }, { name: 'Sat', value: 1330 }, { name: 'Sun', value: 1320 }, ]; 定义一个变量chart与div关联，并在onMounted中调用Echarts的init函数 onMounted(() => { const myChart = echarts.init(chart.value) // 配置项内容 }) 定义一个option对象，在里面配置我们想要在Echarts中显示的内容；这里我定义了title用于显示图表的标题，xAxis配置和显示x轴，yAxis配置和显示y轴，series配置系列；具体的配置参数请看上一篇博客 const option = { title: { text: '数字之美:Echarts柱状图的基础应用' }, xAxis: { type: 'category', data: data.map(item=>item.name) }, yAxis: { type: 'value' }, series: [{ data: data.map(item=>item.value), type: 'bar' }] }; 将上面定义的option作为参数传递给我们上面定义的Echarts实例—myChart在App.vue中插入上面的VueChart组件 import VueChart from './components/VueChart.vue';

一个简单的柱状图我们就实现了，运行看效果在这里插入图片描述但是这个柱状图看起来太单一了，不是很美观，下面我们来进一步的优化

形色俱佳：Echarts柱状图的样式美化与创意设计

现在我们来修改下柱体的颜色、边框、阴影、柱体宽度以及坐标轴线条的样式，我们只需要在option配置项中添加内容即可，代码如下：

const option = { title: { text: '形色俱佳:Echarts柱状图的样式美化与创意设计' }, xAxis: { type: 'category', data: data.map(item=>item.name), axisLine: { lineStyle: { color: '#333' } } }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#333' } } }, series: [{ data: data.map(item=>item.value), type: 'bar', barWidth: 20, itemStyle: { color:'#0286ff', borderColor: '#fff', borderWidth: 2, shadowBlur: 10, shadowColor: '#ccc' }, }], }

修改完成后，运行看效果在这里插入图片描述看起来比我们上面第一次的版本漂亮多了，但是还是不是很完美，柱体看起来太锐利了，颜色也比较单一

独具匠心：Echarts柱状图的柱体形状自定义

柱体是方形的，看起来比较锐利，颜色也太单一了，下面我们把柱体改为圆角的，同时颜色改为渐变色，代码如下：

const option = { title: { text: '独具匠心：Echarts柱状图的柱体形状自定义' }, xAxis: { type: 'category', data: data.map(item=>item.name), axisLine: { lineStyle: { color: '#333' } } }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#333' } } }, series: [{ data: data.map(item=>item.value), type: 'bar', barWidth: 20, itemStyle: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, color: '#00feff' }, { offset: 0.5, color: '#027eff' }, { offset: 1, color: '#0286ff' } ] ), borderColor: '#fff', borderWidth: 2, borderRadius: 30, shadowBlur: 10, shadowColor: '#ccc' }, }], }

在这里插入图片描述嗯，这样，柱状图的样式就比较完美了，下面我们来实现交互效果

动感十足：Echarts柱状图的交互动画实现

这里我想要实现三个交互效果，一是鼠标悬浮到柱体上时，柱体可以高亮；二是弹出提示框；三是增加一个数据缩放功能的dataZoom；代码如下

刷新浏览器，看效果，在这里插入图片描述现在这个图表看起来就漂亮多了

数字排序的艺术：Echarts柱状图的数据排序技巧

下面我们实现Echarts图表的数据排序，要实现这个功能，其实只需要利用数组的sort函数就可以了：在我们定义的data数组下面添加如下代码：升序排序：data.sort((a, b) => a.value - b.value); 在这里插入图片描述降序排序：data.sort((a, b) => b.value - a.value); 好了，关于柱状图的使用技巧就说到这里，其实Echarts可实现的功能远远不止这些，我们还可以在这基础上进行更多的变化和使用，比如样式修改为仿三维柱状图、进度条形式的柱体等，有兴趣的小伙伴可以研究下。

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章