不知道是不是现在的版本更新了,echarts-gl在vue2项目中不能适配使用,难蹦
一.需求分析与设计思路
项目当中遇到改版升级,想要实现如下的一下折柱图的立体效果
想在原来平面柱状图的基础上,有立体的效果.本来打算用echarts-gl库来实现3d版的柱形图,但是引入和配置后,浏览器总是报不能识别的错误,为了尽快实现类似效果,就换做左右色差来做效果.
二.环境准备与依赖引入
主要组件库还是基于echarts 库,没有安装的直接在终端输入以下代码安装
npm i echarts然后在你封装或者使用图表的地方引入使用即可
import * as echarts from 'echarts';三.构建伪3d柱形图
1.首先按照惯例创建图表元素
<!-- 折线图 -->
<template>
<div id="bar3d" style="width: 100%; height: 110%; padding-top: 20px; padding-left: 10px"></div>
</template>当然,行内调整样式根据自己的情况
2.引入echarts,配置该组件需要接收的参数,我个人项目中的情况如下
import echartMixins from './echartMixins';
import * as echarts from 'echarts';
import echartMixins from './echartMixins';
//引入的混入中,主要封装了父组件需要往子组件中传递的x轴信息,y轴最大值信息,以及不同柱形以及折线的y轴信息
//依次为xAxisData,values,maxX
//声明下面变量来控制图表是否已经初始化
data() {
return {
hasInitChart: false,
};
},3.具体思路及代码实时
第一版的时候,我是想采用拼接的方法来达到立体的效果,具体就是在配置每个y轴柱形的数据时,将每个柱形分为3部分组成, 上部-中部-下部,设置头部/底部为椭圆效果,中部为左右色差效果,具体效果和代码如下图
methods: {
init() {
//绿色
const data = [1700, 800, 1700, 600, 800, 1700];
//蓝色
const data2 = [2600, 1400, 3350, 1400, 1400, 3350];
const sideData = data.map((item) => item + 90);
const sideData2 = data.map((item) => item + 90);
var serveTBar = echarts.init(document.getElementById('bar3d'));
serveTBar.setOption(getEcharts3DBar());
function getEcharts3DBar() {
//蓝色
var colorArr2 = ['rgba(11, 83, 128)', 'rgba(2, 143, 224)'];
//绿色
var colorArr = ['rgb(12, 109, 122)', 'rgba(1, 241, 228)'];
//绿色
var color = {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: colorArr[0],
},
{
offset: 0.5,
color: colorArr[0],
},
{
offset: 0.5,
color: colorArr[1],
},
{
offset: 1,
color: colorArr[1],
},
],
};
var color2 = {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: colorArr2[0],
},
{
offset: 0.5,
color: colorArr2[0],
},
{
offset: 0.5,
color: colorArr2[1],
},
{
offset: 1,
color: colorArr2[1],
},
],
};
var barWidth = 15;
var option = {
tooltip: {
trigger: 'axis',
formatter: function (params) {
var str = params[0].name + ':';
params.filter(function (item) {
if (item.componentSubType == 'bar') {
str += '<br/>' + item.seriesName + '：' + item.value;
}
});
return str;
},
},
//图表大小位置限制
grid: {
x: '10%',
x2: '5%',
y: '15%',
y2: '15%',
},
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
//坐标轴
axisLine: {
show: true,
lineStyle: {
width: 1,
color: '#214776',
},
textStyle: {
color: '#fff',
fontSize: '10',
},
},
type: 'category',
axisLabel: {
textStyle: {
color: '#C5DFFB',
fontWeight: 500,
fontSize: '14',
},
},
axisTick: {
textStyle: {
color: '#fff',
fontSize: '16',
},
show: false,
},
axisLine: {
show: true,
lineStyle: {
type: 'dashed', //线的类型 虚线
color: '#DEDEDE',
},
},
},
yAxis: {
name: '自定义显示',
nameTextStyle: {
color: '#DEDEDE',
fontSize: 12,
padding: 10,
},
min: 0, //最小
max: 3500, //最大
interval: 500, //相差
type: 'value',
splitLine: {
show: true,
lineStyle: {
type: 'dashed', //线的类型 虚线0
opacity: 0.2, //透明度
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
//坐标值标注
axisLabel: {
show: true,
textStyle: {
color: '#C5DFFB',
},
},
},
series: [
//中
{
z: 1,
name: '绿色',
type: 'bar',
barWidth: barWidth,
barGap: '0%',
data: data,
itemStyle: {
normal: {
color: color,
//柱形图上方标题
label: {
show: true,
position: 'top',
textStyle: {
color: 'rgb(1, 255, 250)',
fontSize: 8,
},
},
},
},
},
//下
{
z: 2,
name: '绿色',
type: 'pictorialBar',
data: sideData,
symbol: 'roundRect',
symbolOffset: ['-75%', '50%'],
symbolSize: [barWidth, 10],
itemStyle: {
normal: {
color: color,
},
},
tooltip: {
show: false,
},
},
//上
{
z: 3,
name: '绿色',
type: 'pictorialBar',
symbolPosition: 'end',
data: data,
symbol: 'roundRect',
symbolOffset: ['-75%', '-50%'],
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
itemStyle: {
normal: {
borderWidth: 2,
color: colorArr[2],
},
},
tooltip: {
show: false,
},
},
{
z: 1,
name: '蓝色',
type: 'bar',
barWidth: barWidth,
barGap: '50%',
data: data2,
itemStyle: {
normal: {
color: color2,
//柱形图上方标题
label: {
show: true,
position: 'top',
textStyle: {
color: 'rgb(2, 157, 246)',
fontSize: 8,
},
},
},
},
},
{
z: 2,
name: '蓝色',
type: 'pictorialBar',
data: sideData2,
symbol: 'roundRect',
symbolOffset: ['75%', '50%'],
symbolSize: [barWidth, 10],
itemStyle: {
normal: {
color: color2,
},
},
tooltip: {
show: false,
},
},
{
z: 3,
name: '蓝色',
type: 'pictorialBar',
symbolPosition: 'end',
data: data2,
symbol: 'roundRect',
symbolOffset: ['75%', '-50%'],
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
itemStyle: {
normal: {
borderWidth: 2,
color: colorArr2[2],
},
},
tooltip: {
show: false,
},
},
],
};
return option;
}
},
},但是这样设置静态柱形图,微调下看着或许是没有什么影响,但是当你多个柱形的时候,点击上方的legend标签来控制柱形的显示与隐藏时,每个柱形原本的上部和下部就会偏移,不能很好的控制上和下部的相对定位,于是边保留了部分代码,换做下面的一种类似效果
第二版效果如下
去除上部和下部的组合,只保留了色差的效果,代码如下
initChart(xAxisData, values, maxX) {
var serveTBar = echarts.init(document.getElementById('bar3d'));
serveTBar.setOption(getEcharts3DBar());
function getEcharts3DBar() {
//提醒数
var colorArr2 = ['rgba(232, 137, 187,1)', 'rgba(232, 137, 187,0.7)'];
//预加载
var colorArr = ['rgba(249, 218, 142,1)', 'rgba(240, 234, 142,0.7)'];
//互认数
var colorArr3 = ['rgba(89, 172, 176,1)', 'rgba(89, 172, 176,0.7)'];
//引用数
var colorArr4 = ['rgba(104, 221, 250,1)', 'rgba(104, 221, 250,0.7)'];
//颜色设置
var color = {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: colorArr[1], // 不透明
},
{
offset: 0.5,
color: colorArr[1], // 不透明
},
{
offset: 0.5,
color: colorArr[0], // 更透明
},
{
offset: 1,
color: colorArr[0], // 更透明
},
],
};
var color2 = {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: colorArr2[1],
},
{
offset: 0.5,
color: colorArr2[1],
},
{
offset: 0.5,
color: colorArr2[0],
},
{
offset: 1,
color: colorArr2[0],
},
],
};
var color3 = {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: colorArr3[1],
},
{
offset: 0.5,
color: colorArr3[1],
},
{
offset: 0.5,
color: colorArr3[0],
},
{
offset: 1,
color: colorArr3[0],
},
],
};
var color4 = {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: colorArr4[1],
},
{
offset: 0.5,
color: colorArr4[1],
},
{
offset: 0.5,
color: colorArr4[0],
},
{
offset: 1,
color: colorArr4[0],
},
],
};
//柱子宽度
var barWidth = 10;
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999',
},
},
backgroundColor: 'rgba(16, 29, 66,0.8)',
textStyle: {
color: '#fff',
},
borderColor: '#63acf3',
},
grid: {
x: '10%',
x2: '15%',
y: '20%',
y2: '25%',
},
legend: {
data: ['预加载', '提醒数', '互认数', '引用数', '互认率'],
textStyle: {
color: '#fff',
},
itemWidth: 6,
itemHeight: 3,
},
xAxis: {
data: xAxisData,
type: 'category',
axisPointer: {
type: 'shadow',
},
//字体颜色
axisLabel: {
textStyle: {
color: '#fff',
},
},
axisLabel: {
interval: 0,
textStyle: {
color: 'fff',
fontWeight: 500,
fontSize: '12',
},
},
},
yAxis: [
{
type: 'value',
name: '次',
nameTextStyle: {
color: '#fff', // 白色
},
min: 0,
max: maxX,
interval: maxX / 5,
axisLabel: {
formatter: function (value) {
return value / 10000 + '万';
},
textStyle: {
color: '#fff', // 白色
},
},
},
{
type: 'value',
name: '',
nameTextStyle: {
color: '#fff', // 白色
},
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value} %',
textStyle: {
color: '#fff', // 白色
},
},
},
],
series: [
{
name: '预加载',
type: 'bar',
barWidth: barWidth,
barGap: '15%',
data: values[3],
symbol: 'roundRect',
itemStyle: {
normal: {
color: color,
},
},
tooltip: {
valueFormatter: function (value) {
return value + ' 次';
},
},
},
{
name: '提醒数',
type: 'bar',
barWidth: barWidth,
barGap: '15%',
data: values[1],
symbol: 'roundRect',
itemStyle: {
normal: {
color: color2,
},
},
tooltip: {
valueFormatter: function (value) {
return value + ' 次';
},
},
},
{
name: '互认数',
type: 'bar',
barWidth: barWidth,
barGap: '15%',
data: values[0],
symbol: 'roundRect',
itemStyle: {
normal: {
color: color3,
},
},
tooltip: {
valueFormatter: function (value) {
return value + ' 次';
},
},
},
{
name: '引用数',
type: 'bar',
barWidth: barWidth,
barGap: '15%',
data: values[2],
symbol: 'roundRect',
itemStyle: {
normal: {
color: color4,
},
},
tooltip: {
valueFormatter: function (value) {
return value + ' 次';
},
},
},
{
name: '互认率',
type: 'line',
yAxisIndex: 1,
data: values[4],
color: 'rgba(241, 161, 105,0.9)',
tooltip: {
valueFormatter: function (value) {
return value + ' %';
},
},
},
],
};
return option;
}
},四、需求分析与设计思路
比较匆忙哈,相信肯定还有好的方法,有好的方法的大佬欢迎指点迷津.
标签：color,data,barWidth,柱形图,中折柱,vue2,offset,var,type From： https://blog.csdn.net/2301_77838211/article/details/137590412