最近在做图表，不做不知道，里边的细节点好多……记录下这些配置，方便后续使用~~~
渐变色详解参考：/p/183893861
效果图：
遇到的问题：
（1）改变 legend 图标和文字位置：使之对齐
之前：
修改后：
代码实现：
top: -3改变 legend 距离上边的位置
padding: [3, 0, 0, 0],改变 legend 的文字和图标对齐问题
legend: {itemWidth: 12,itemHeight: 12,data: ['已完成', '未完成', '已超时', '未分配'],left: -5, // 距离左边top: -3,formatter: function (name) {var arr = ['{a|' + name + '}']return arr.join('\n')},textStyle: {rich: {a: {color: '#666',fontSize: 14,padding: [3, 0, 0, 0],},},},},
（2）柱状图渐变色color
itemStyle: {color: (params) => {if (params.data === 0) {return}let gradientArr = []gradientArr = [{offset: 0,color: '#3AB236',},{offset: 1,color: '#93E690',},]// 这里的this.$echarts是项目中的echarts示例，改成对应的名字就好return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, gradientArr, false)},barBorderRadius: [1, 1, 1, 1], // 柱状图圆角},
（3）每根柱子添加圆角、柱子上堆叠部分有空白间隙
圆角：barBorderRadius: [1, 1, 1, 1],
堆叠：设置stack: 'one',，即设置stack值相同即可
空白间隙：在series中配置 空白柱子 堆叠到原有柱子上
// 堆叠图 - 空白间距let obj = {name: '空白间距',type: 'bar',stack: 'one',barWidth: 24, //柱子宽度emphasis: this.emphasisStyle,data: this.blankSpace,itemStyle: {color: '#fff',barBorderRadius: [1, 1, 1, 1],},}
（4）背景虚线
yAxis: {name: 'XX项',splitLine: {show: true,// 背景虚线lineStyle: {type: [5, 7],dashOffset: 5,},},//用于设置y轴的字体axisLabel: {show: true, //这里的show用于设置是否显示y轴下的字体 默认为truetextStyle: {//textStyle里面写y轴下的字体的样式color: '#999',fontSize: 12,},},},
（5）X轴和Y轴自定义样式
设置xAxis和yAxis
（6）坐标轴的name属性更改位置
nameTextStyle: {padding: [0, 0, 0, -50], // 四个数字分别为上右下左与原位置距离},
（7）hover 时的 tooltip 自定义提示
使用formatter回调函数
（8）hover 时，柱状图设置阴影 （设置axisPointer属性），并且阴影不能遮挡柱子的颜色
hover 时设置背景阴影：在 tooltip 中设置
axisPointer: {// 坐标轴指示器，坐标轴触发有效type: 'shadow', // 默认为直线，可选为：'line' | 'shadow' ，不需要阴影设置为空 type:''shadowStyle：{color: 'red' //背景填充颜色}},
修改前：
修改后：在series中给每个柱子添加层级zlevel: 11
（9）图表随着浏览器窗口的改变而改变
window.addEventListener('resize', function () {//浏览器大小调整echarts随之改变myChart.resize()})
完整实现：
<template><div id="treeChart" :style="{ height: '242px' }"></div><!-- padding: '30px' --></template><script>export default {name: 'eCharts',data() {return {data1: [],data2: [],data3: [],data4: [],xAxisData: [],blankSpace: [],}},mounted() {for (var i = 0; i < 7; i++) {this.xAxisData.push('项XXXXXXXXX' + (i + 1))this.data1.push((Math.random() * 200).toFixed(2))this.data2.push((Math.random() * 500).toFixed(2))this.data3.push((Math.random() * 180).toFixed(2))this.data4.push((Math.random() * 160).toFixed(2))}this.blankSpace = Array(this.data1.length).fill(10) //空白间距 10this.showChart()},methods: {showChart() {// 基于准备好的dom，初始化echarts实例var myChart = this.$echarts.init(document.getElementById('treeChart'))myChart.clear()// 堆叠图 - 空白间距let obj = {name: '空白间距',type: 'bar',stack: 'one',barWidth: 24, //柱子宽度data: this.blankSpace,itemStyle: {color: '#fff',barBorderRadius: [1, 1, 1, 1],},}// 指定图表的配置项和数据var option = {color: ['#3AB236', '#F3912E', '#EC4646', '#E6E6E6'],legend: {itemWidth: 12,itemHeight: 12,data: ['已完成', '未完成', '已超时', '未分配'],left: -5, // 距离左边},// 柱子背景阴影tooltip: {trigger: 'axis',showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位msaxisPointer: {// 坐标轴指示器，坐标轴触发有效type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'},// 自定义提示formatter: (params) => {// 去除 ‘空白间距’let newArr = []params.forEach((work) => {if (work.seriesName != '空白间距') {newArr.push(work)}})// 获取xAxis data中的数据let dataStr = `<div><p style="font-size:14px;font-weight:bold;color:#333;margin:0 10px 15px;">${newArr[0].name}</p><p style="font-size:14px;font-weight:bold;color:#333;margin:0 10px 10px;">XX项600个</p></div>`newArr.forEach((item) => {// 获取图标(小圆点)颜色，并且自定义样式为正方形，即要改变小圆点，只需重写marker的html片段，并修改样式即可// 获取series中data// 获取seriersNameconsole.log('item', item)dataStr += `<div><div style="font-size:14px; color:#666"> <span style="display:inline-block;margin-right:0px;width:12px;height:12px;border-radius:2px;background-color:${item.color.colorStops[0].color};"></span> <span style="margin-right:5px;">${item.seriesName}</span><span>300个</span> <span style="float:right; margin-left:20px;">${item.data}</span></div></div>`})return dataStr},},xAxis: {data: this.xAxisData,splitLine: {show: false },splitArea: {show: false },axisTick: {show: false, //是否显示刻度线 默认为truealignWithLabel: true,},axisLabel: {show: true, //这里的show用于设置是否显示x轴下的字体 默认为trueinterval: 0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。textStyle: {//textStyle里面写x轴下的字体的样式color: '#333',fontSize: 14,},// 文字过长 超出12个字显示省略号formatter: function (value) {if (value.length > 12) {return value.substring(0, 5) + '...'} else {return value}},},axisLine: {onZero: true, // 显示0刻度lineStyle: {//lineStyle里面写x轴那一条线的样式color: '#E6E6E6',width: 1, //轴线的粗细},},},yAxis: {name: '配置项',nameTextStyle: {padding: [0, 0, 0, -50], // 四个数字分别为上右下左与原位置距离},splitLine: {show: true,// 背景虚线lineStyle: {type: [5, 7],dashOffset: 5,},},//用于设置y轴的字体axisLabel: {show: true, //这里的show用于设置是否显示y轴下的字体 默认为truetextStyle: {//textStyle里面写y轴下的字体的样式color: '#999',fontSize: 12,},},},grid: {bottom: 40, // 图表到下方内容的距离left: 50, // 图表到左边的距离right: 20,},series: [{name: '已完成',type: 'bar',stack: 'one',barWidth: 24, //柱子宽度data: this.data1,zlevel: 11, // 设置层级itemStyle: {color: (params) => {if (params.data === 0) {return}let gradientArr = []gradientArr = [{offset: 0,color: '#3AB236',},{offset: 1,color: '#93E690',},]// 这里的this.$echarts是项目中的echarts示例，改成对应的名字就好return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, gradientArr, false)},barBorderRadius: [1, 1, 1, 1], // 柱状图圆角},},obj, // 空白间隔{name: '未完成',type: 'bar',stack: 'one',data: this.data2,zlevel: 11,itemStyle: {color: (params) => {if (params.data === 0) {return}let gradientArr = []gradientArr = [{offset: 0,color: '#F3912E',},{offset: 1,color: '#F3C290',},]// 这里的this.$echarts是项目中的echarts示例，改成对应的名字就好return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, gradientArr, false)},barBorderRadius: [1, 1, 1, 1],},},obj, // 空白间隔{name: '已超时',type: 'bar',stack: 'one',data: this.data3,zlevel: 11,itemStyle: {color: (params) => {if (params.data === 0) {return}let gradientArr = []gradientArr = [{offset: 0,color: '#EC4646',},{offset: 1,color: '#F27979',},]// 这里的this.$echarts是项目中的echarts示例，改成对应的名字就好return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, gradientArr, false)},barBorderRadius: [1, 1, 1, 1],},},obj, // 空白间隔{name: '未分配',type: 'bar',stack: 'one',data: this.data4,zlevel: 11,itemStyle: {// 柱子的渐变色color: (params) => {if (params.data === 0) {return}let gradientArr = []gradientArr = [{offset: 0,color: '#E6E6E6',},{offset: 1,color: '#F2F1F1',},]// 这里的this.$echarts是项目中的echarts示例，改成对应的名字就好return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, gradientArr, false)},barBorderRadius: [1, 1, 1, 1],},},],}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option)window.addEventListener('resize', function () {//浏览器大小调整echarts随之改变myChart.resize()})},},}</script>
