1、关于给柱状图坐标轴加链接的问题
第一步： 将xAxis或者yAxis的属性triggerEvent 置为 true;
第二步：点击事件，如：
mybarDoubleChart.setOption(option);
mybarDoubleChart.on('click', function (params) {
//params为被选中的坐标值
if(params.componentType == "xAxis"){
alert("单击了"+params.value+"x轴标签");
}else{
alert("单击了"+params.name+"柱状图");
}
});
y轴同理，附链接：www.codeleading.com/article/898…
2、立体柱状图的实现
立体方形柱状图：
实现效果：
代码：
initChart(xdata, ydata) {
//xdata:横坐标数据****************
//ydata:纵坐标数据****************
let myChart = this.$echarts.init(document.getElementById('chartsBox'))
const _this = this
const CubeLeft = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint
const c0 = [shape.x, shape.y]
const c1 = [shape.x - 6, shape.y - 6]
const c2 = [xAxisPoint[0] - 7, xAxisPoint[1] - 7]
const c3 = [xAxisPoint[0], xAxisPoint[1]]
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
}
})
const CubeRight = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint
const c1 = [shape.x, shape.y]
const c2 = [xAxisPoint[0], xAxisPoint[1]]
const c3 = [xAxisPoint[0] + 10, xAxisPoint[1] - 9]
const c4 = [shape.x + 10, shape.y - 7]
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
}
})
const CubeTop = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const c1 = [shape.x, shape.y]
const c2 = [shape.x + 10, shape.y - 6]
const c3 = [shape.x + 5, shape.y - 11]
const c4 = [shape.x - 6, shape.y - 6]
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
}
})
this.$echarts.graphic.registerShape('CubeLeft', CubeLeft)
this.$echarts.graphic.registerShape('CubeRight', CubeRight)
this.$echarts.graphic.registerShape('CubeTop', CubeTop)
// const MAX = [10000, 10000, 10000, 10000, 10000,10000,10000]
//设置阴影高度,选取最大的纵坐标数值，这里默认最大数值为第一位，可以编个函数自己找，若数据起伏变化不大，可自定最大数值
const MAX = []
ydata.forEach(item => {
MAX.push(ydata[0])
})
let option = {
grid: {
left: '4%',
right: '5%',
bottom: '5%',
top: '5%',
containLabel: true
},
xAxis: {
type: 'category',
data: xdata,
axisLine: {
show: true,
lineStyle: {
color: '#B0D2F9'
}
},
axisTick: {
show: false,
length: 9,
alignWithLabel: true,
lineStyle: {
color: '#7DFFFD'
}
},
axisLabel: {
//坐标轴刻度标签的相关设置。
rotate:-15,
formatter: function (params) {
var newParamsName = "";// 最终拼接成的字符串
var paramsNameNumber = params.length;// 实际标签的个数
var provideNumber = 20;// 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
/**
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";// 表示每一次截取的字符串
var start = p * provideNumber;// 开始截取的位置
var end = start + provideNumber;// 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName
},
textStyle: {
color: '#B0D2F9',
fontSize: 12,
},
fontSize: 14,
interval: 0,
},
// triggerEvent:true
},
yAxis: {
type: 'value',
min: 0,
axisLine: {
show: false,
lineStyle: {
color: '#B0D2F9'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color:'rgba(176, 210, 249, 0.6)'
}
},
axisTick: {
show: false
},
// boundaryGap: ['20%', '20%']
},
series: [
{
type: 'custom',
renderItem: function (params, api) {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(47,102,192,.27)'
}
}, {
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(59,128,226,.27)'
}
}, {
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(27,156,221,.27)'
}
}]
}
},
data: MAX
},
{
type: 'custom',
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [
{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#19B5FF'
},
{
offset: 1,
color: '#0074D6'
}
])
}
},
{
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#19B5FF'
},
{
offset: 1,
color: '#0074D6'
}
])
}
},
{
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: '#5BE8FF'
},
},
]
}
},
data: ydata
},
]
}
myChart.setOption(option)
}
},
立体圆形柱状图：
initChart(xdata,sdata) {
// xdata:横坐标数据; sdata:纵坐标数据
//设置柱体阴影高度
let max = 0;
sdata.forEach((item)=>{
if(max <= item){
max = item
}
})
max+=max/10
var _this = this
//对dom节点进行渲染
let myChart = this.$echarts.init(document.getElementById('flow'))
let option = {
grid: {
left: '5%',
top: '15%',
right: '5%',
bottom: '0%',
containLabel: true,
},
xAxis: [
{
data: xdata,
axisLabel : {//坐标轴刻度标签的相关设置。
rotate:-15,//坐标刻度倾斜
formatter : function(params){
var newParamsName = "";// 最终拼接成的字符串
var paramsNameNumber = params.length;// 实际标签的个数
var provideNumber = 15;// 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
/** * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";// 表示每一次截取的字符串
var start = p * provideNumber;// 开始截取的位置
var end = start + provideNumber;// 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName
},
textStyle: {
color: '#B0D2F9',
fontSize: 12,
},
},
axisLine: {
show: true, //显示x轴
lineStyle: {
color: 'rgba(176, 210, 249, 0.3)',
},
},
axisTick: {
show: false, //显示刻度
},
boundaryGap: true,
triggerEvent:true
},
],
yAxis: {
name: data.unit,
nameTextStyle: {
color: '#fff'
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(176, 210, 249, 0.06)',
type: 'solid',
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#B0D2F9',
},
},
},
series: [
//柱顶圆片
{
name: '',
type: 'pictorialBar',
symbolSize: [20, 10],
symbolOffset: [0, -5],
z: 10,
data: sdata,
symbolPosition: 'end',
itemStyle: {
normal: {
color: {
x:1,
y:1,
x2:0,
y2:0,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: 'rgba(0, 148, 231, 1)',
},
{
offset: 1,
color: 'rgba(0, 178, 253, 1)',
},
],
},
},
},
},
//柱体
{
name: '',
type: 'bar',
barWidth: 20,
data: sdata,
itemStyle: {
normal: {
color: {
x:0,
y:1,
x2:1,
y2:1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: 'rgba(6, 92, 210, 1)',
},
{
offset:0.34,
color: 'rgba(0, 138, 255, 1)',
},
{
offset: 1,
color: 'rgba(69, 244, 255, 1)',
},
],
},
},
},
emphasis: {
label: {
focus: 'self',
show: true,
position: 'top',
fontSize: 18,
// offset:[0,-20],
color: '#FFB444',
backgroundColor: {
image:require('@/assets/images/ic_numbei.png'),
},
align:'center',
formatter:'{a|{c}}',
padding: [-10, 0, 20, 0],
width:30,
},
},
},
{
name: '',
type: 'pictorialBar',
symbolSize: [20, 10],
symbolOffset: [0, -5],
z: 10,
data: [max,max,max,max,max,max,max,max,max,max,],
symbolPosition: 'end',
itemStyle: {
normal: {
color: {
x:1,
y:1,
x2:0,
y2:0,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: '#026eb0',
},
{
offset: 1,
color: '#026eb0',
},
],
},
},
},
},
{
name: '',
type: 'bar',
barWidth: 20,
barGap:"-100%",
symbolOffset: [0, -5],
data: [max,max,max,max,max,max,max,max,max,max,],
itemStyle: {
normal: {
color: {
x:0,
y:1,
x2:1,
y2:1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: 'rgba(6, 126, 210, 0.25)',
},
{
offset:0.34,
color: 'rgba(0, 184, 255, 0.25)',
},
{
offset: 1,
color: 'rgba(89, 229, 227, 0.25)',
},
],
},
borderRadius: [3, 3, 0, 0]
},
},
},
],
};
myChart.setOption(option)
}
图例文本过长溢出的问题
参考网址：www.cnblogs.com/YiFeng-Liu/…
legend: {
orient: 'vertical',
top:'25%',
formatter: function (name) {
return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
},
//开启tooltip
tooltip: {
show: true
},
left: 'left',
},
