Echart|Echart Bar双柱状图样式最全详解 EchartBar双柱状图样式最全详解

前言
安装及配置

1. 安装 Echarts
2. 全局引入 Echarts
3. 按需引入 Echarts

样式优化

x 轴基础样式
最大和最小刻度标签
series 数据列悬浮高亮
坐标指示器背景渐变色
tooltip 提示框自定义样式
y 轴基础样式
legend 图例样式自定义

总结

前言在最近的项目中，有可视化图表的需求，第一时间就想到了Echarts和Hightcharts。
要用到的可视化图表都是比较常见的，Echarts文档和实例都比较全面，而且还是中文的，方便阅读，于是选择了Echarts。
【Echart|Echart Bar双柱状图样式最全详解】Echarts的图表样式如果是自用，肯定是没啥问题的，但是 UI 肯定是不满意的，于是进行了一系列的样式调整...

安装及配置
前端框架为easywebpack-vue，使用的Echarts版本为^5.0.1
Echarts 官方文档: echarts.apache.org/zh/index.ht…

1. 安装 Echarts

npm install echarts --save

2. 全局引入 Echarts
在 main.js 加入如下代码：

import * as echarts from "echarts"; Vue.prototype.$echarts = echarts;

3. 按需引入 Echarts
（1）新增 echarts.js 文件

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口import * as echarts from "echarts/core"; // 引入各种图表，图表后缀都为 Chartimport { BarChart, LineChart, PieChart } from "echarts/charts"; // 引入提示框，标题，直角坐标系等组件，组件后缀都为 Componentimport {TitleComponent,TooltipComponent,ToolboxComponent,GridComponent,LegendComponent,AxisPointerComponent,DatasetComponent,} from "echarts/components"; // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步import { SVGRenderer } from "echarts/renderers"; // 注册必须的组件echarts.use([BarChart,LineChart,PieChart,TitleComponent,TooltipComponent,ToolboxComponent,GridComponent,LegendComponent,AxisPointerComponent,DatasetComponent,SVGRenderer,]); export default echarts;

（2）在 main.js 文件中引入

import echarts from "./utils/echarts"; Vue.prototype.$echarts = echarts;

使用举例

原始效果展示：

文章图片

改造后目标效果展示：

文章图片

样式优化

x 轴基础样式
基础设置如下所示，可设置刻度和轴线相关的属性

xAxis: {type: "category",boundaryGap: true, // 坐标轴两边留白策略，默认为trueaxisTick: { // 刻度show: false,},axisLabel: { // 刻度标签color: "#808080",fontSize: 12,margin: 8, // 刻度标签与轴线之间的距离interval: "auto", // x轴标签显示间隔，自动},axisLine: { // 轴线lineStyle: {color: "#c3c3c3",width: 0.5,},},splitLine: { // 分割线show: false,interval: "auto",},splitArea: { // 分割区域show: false,areaStyle: {},},},

最大和最小刻度标签
主要属性是interval，要设置的足够大，比正常展示的刻度个数大一些，就能实现只展示最大和最小刻度标签

xAxis: {axisLabel: {// interval: "auto",interval: 50, // 只显示最大和最小坐标showMinLabel: true, // 显示最小刻度标签showMaxLabel: true, // 显示最大刻度标签}}

文章图片

series 数据列悬浮高亮

const stackBarSeries = {type: "bar", // 柱状图barWidth: 32, // 柱体宽度stack: "total", // 数据堆叠showBackground: false, // 是否显示柱条背景色// 高亮的图形样式和标签样式emphasis: {// 鼠标hover时，同业务项高亮，其他项淡出图形// focus: "series",// 默认配置，仅当前hover数据淡出focus: "none",},}; let option = {series: R.map((o) =>R.merge(stackBarSeries, {name: o,}),["苹果", "梨子", "桃子"]),};

文章图片

坐标指示器背景渐变色
主要是设置tooltip提示框组件的trigger，让 x 轴悬浮触发；然后设置xAxis的坐标指示器axisPointer，指示器遮罩样式shadowStyle可以设置渐变色

let option = {tooltip: {// 提示框组件trigger: "axis", // 坐标轴触发},xAxis: {// 坐标轴指示器axisPointer: {type: "shadow",// 坐标轴指示器的 z 值，控制图形的前后顺序z: 1,// 指示器遮罩样式shadowStyle: {// 解决hover背景色渐变问题color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(234,244,255,1)", // 0% 处的颜色},{offset: 1,color: "rgba(234,244,255,0.3)", // 100% 处的颜色},],global: false, // 缺省为 false},// 设置背景色及阴影// color: "rgba(234,244,255,1)",// opacity: 1,// shadowColor: "rgba(0, 0, 0, 0.5)",// shadowBlur: 10,// shadowOffsetX: 10,// shadowOffsetY: 10,},},},};

文章图片

tooltip 提示框自定义样式
tooltip默认的样式或者值可能不符合开发的要求，可以使用formatter函数自定义处理

let option = {tooltip: {// 提示框组件trigger: "axis", // 坐标轴触发padding: [20, 16, 12, 16],backgroundColor: "#fff",alwaysShowContent: false,formatter: function(params) {let html = `${params[0].axisValue}${params.map((item) => `${item.seriesName}￥${item.value[item.encode.y[0]] || 0}`).join("")}总计￥${R.reduceRight(R.add,0,R.drop(1, params[0].value || []))}`; return html; },},};

文章图片

y 轴基础样式

let option = {yAxis: {type: "value",minInterval: 100,nameGap: 8,axisLabel: {color: "#808080",fontSize: 10,// formatter: (value) => {//return moneyFormatValue(value); // },},splitLine: {lineStyle: {type: "dashed",color: "#ebebeb",width: 0.5,},},},};

文章图片

legend 图例样式自定义

let option = {grid: {left: 0,right: 12,bottom: 0,top: 68,containLabel: true,},// 图例设置legend: {top: 32,left: -5,icon: "circle",itemHeight: 6, // 修改icon图形大小itemGap: 24,textStyle: {fontSize: 12,color: "#333",padding: [0, 0, 0, -8], // 修改文字和图标距离},},};