echarts，柱状图配置,legend

m0_60827885

已于 2022-12-13 10:15:24 修改

阅读量9.3k

点赞数 4

文章标签： vue.js javascript 前端

于 2022-03-16 17:16:06 首次发布

本文链接：https://blog.csdn.net/m0_60827885/article/details/119795214

版权

,echarts使用：

一、鼠标悬停时不显示文字设置：

option = {

tooltip: {

show:false,

二、鼠标悬停时扇形不高亮：

series: [{hoverAnimation: false,}]

图表的上下左右距离：

选中显示单位：

三、echarts Y轴名称显示不全

1.调整grid下的left属性，说白了就是调整y轴与左侧的距离，大了就能显示更多的文字

grid:{
top:48,
left:400,// 调整这个属性
right:50,
bottom:50,
}

2.通过设置axisLabel下的formatter属性，实现自定义处理文字，将多出来的用省略号替代

yAxis:{
axisLabel:{
show:true,
formatter:function(value){
var texts=value;
if(texts.length>15){ // 具体多少字就看自己了
texts=texts.substr(0,15)+'...';
}
return texts;
}

四、图例设置

 legend:{
                    //纵向
                    orient: 'vertical',
                    top: '00%',
                    left: '60%',
                    //图例距离饼图的距离
                    itemGap: 20,
                    itemWidth: 14,// 设置图例图形的宽
                    itemHeight: 14,
                    textStyle:{
                        color:'#fff',
                        fontSize:'14',
                        rich: {
                            a: {
                                width: 50，
                                align: 'middle' //文字居中显示       
                            },
                            b: {
                                width: 30,
                                color:'#03C8D7'，
                                align: 'middle'
                            },
                            c:{
                                color:'#03C8D7'
                            }
                        }
                    },
                    formatter: function(name) {
                        var data = option.series[0].data;
                        var total = 0;
                        var tarValue;
                        for (var i = 0; i < data.length; i++) {
                        total += Number(data[i].value);
                        if (data[i].name == name) {
                            tarValue = data[i].value;
                        }
                        }
                        var v = tarValue;
                        var p = Math.round(((v / total) * 100));
                        return `{a|${name}}  占比\n {b|${v}人}     {c|${p}%}`;
                    },

legend: {
show: true, //是否显示
type: "plain", // 图例的类型 'plain':普通图例 'scroll':可滚动翻页的图例
zlevel: 1, // 所有图形的 zlevel 值。
icon: "circle",
top: "5%", // bottom:"20%" // 组件离容器的距离
right: "5%", //left:"10%" // // 组件离容器的距离
width: "auto", // 图例组件的宽度
height: "auto", // 图例组件的高度
orient: "horizontal", // 图例列表的布局朝向。 'horizontal' 'vertical'
align: "auto", // 图例标记和文本的对齐
padding: 5, // 图例内边距
itemWidth: 6, // 图例标记的图形宽度。
itemGap: 20, // 图例每项之间的间隔。
itemHeight: 14, // 图例标记的图形高度。
symbolKeepAspect: true, // 如果图标（可能来自系列的 symbol 或用户自定义的 legend.data.icon）是 path:// 的形式，是否在缩放时保持该图形的长宽比。

图例百分比显示设置，同一图例各项的间隔以及图例颜色大小：

    // 使用回调函数
            formatter: function(name) {
                var data = option.series[0].data;
                var total = 0;
                var tarValue;
                for (var i = 0; i < data.length; i++) {
                total += Number(data[i].value);
                if (data[i].name == name) {
                    tarValue = data[i].value;
                }
                }
                var v = tarValue;
                var p = Math.round(((v / total) * 100));
                return `${name}            ${p}%`;
            },

            rich: {                           //图例各项的间隔以及图例颜色大小

                a: {
                  color: "red",
                  lineHeight: 10,
                },
                 b: {
                  color: "#fff",
                  lineHeight: 10,
                },
              }, // 自定富文本样式

selectedMode: true, // 图例选择的模式，
inactiveColor: "#ccc", // 图例关闭时的颜色。
textStyle: {
color: "#556677", // 文字的颜色。
fontStyle: "normal", // 文字字体的风格。
fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
fontFamily: "sans-serif", // 文字的字体系列。
fontSize: 12, // 文字的字体大小。
lineHeight: 20, // 行高。
backgroundColor: "transparent", // 文字块背景色。
borderColor: "transparent", // 文字块边框颜色。
borderWidth: 0, // 文字块边框宽度。
borderRadius: 0, // 文字块的圆角。
padding: 0, // 文字块的内边距
shadowColor: "transparent", // 文字块的背景阴影颜色
shadowBlur: 0, // 文字块的背景阴影长度。
shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。
shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。
// width: 50, // 文字块的宽度。默认
// height: 40, // 文字块的高度默认
textBorderColor: "transparent", // 文字本身的描边颜色。
textBorderWidth: 0, // 文字本身的描边宽度。
textShadowColor: "transparent", // 文字本身的阴影颜色。
textShadowBlur: 0, // 文字本身的阴影长度。
textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。

},
}
图例的内容：显示百分比：

formatter: function(name) {
            var data = option.series[0].data;
            var total = 0;
            var tarValue;
            for (var i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            var v = tarValue;
            var p = Math.round(((tarValue / total) * 100));
            return `${name}  ${v}人(${p}%)`;
          },

柱状图与坐标轴直接有距离：使用stack: 在series里再添加一个{}，颜色设置为透明：

 series: [
             {
           data: [5, 5, 5, 5, 5, 5],
            type: 'bar',
            barWidth: 14,
            stack: '1',
            itemStyle: {
                barBorderRadius: [20,20,20,20],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(178, 189, 255,0)' },
                // { offset: 0.5, color: '#188df0' },
                { offset: 1, color: 'rgba(82, 106, 255,0)' }
                ])
            },
            },
            {
           data: [60, 90, 50, 80],
            type: 'bar',
            barWidth: 14,
            stack: '1',
            itemStyle: {
                barBorderRadius: [20,20,20,20],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(178, 189, 255,0.8)' },
                // { offset: 0.5, color: '#188df0' },
                { offset: 1, color: 'rgba(82, 106, 255,0.8)' }
                ])
            },
            }
        ]
        };

图形向上移动一定的距离：

symbolOffset

例如 [0, '-50%'] 就是把图形向上移动了自身尺寸的一半的位置

柱状图的柱子使用图片：

首先根据图片所在路径引入图片：import bar_bg from "@/assets/images/economics/bar_bg.png";

在echarts使用图片：

柱形图折线图多条Y轴；

首先 series中的yAxisIndex他的值（从零开始）等于几，这个数据对应的y轴就是yAxis对应的第几条y轴。y轴线的设置：

  yAxis: [        
          {
            show:true,  
            type: 'value',
            name:'亿元',
            splitLine: {
                //隐藏网格线
                show: true,
                lineStyle: {
                  color: 'rgba(119, 119, 119, 1)', //网格线的颜色
                  width: 0.5,
                  type: 'dotted'
                }
              },
            axisLine:{
              show:true,
              lineStyle:{
                color:"rgba(96,253,248,0.6)"
              }
            }
        },
        {
          show:true,  
          type: 'value',
          name:'%',
          min: 0,
          max: 100,
          interval: 25,
          splitNumber: 6, //设置坐标轴的分割段数
           splitLine: {
                //隐藏网格线
                show: true,
                lineStyle: {
                  color: 'rgba(119, 119, 119, 1)', //网格线的颜色
                  width: 0.5,
                  type: 'dotted'
                }
              },
           axisLine:{
              show:true,
              lineStyle:{
                color:"rgba(96,253,248,0.6)"
              }
            }
        },],

鼠标移入显示数据设置：

          tooltip: {
                 trigger: 'axis',
                  backgroundColor: "rgba(0,0,0,0.4)",
                  borderColor: "transparent",
                  textStyle: {
                  fontSize: 14,
                  color: "#fff"
                },
                  formatter: '{b0}({a0}): {c0}<br />{b1}({a1}): {c1}%'
            }  //双Y轴的时候

横板柱状图加滚动：

 dataZoom: [
            {
               start:0,//默认为0
               end: 100,//默认为100
               type: 'slider',
               maxValueSpan:9,//显示数据的条数(默认显示10个)
               show: true,
               yAxisIndex: [0],
               handleSize: 0,//滑动条的 左右2个滑动条的大小
               height: '70%',//组件高度
               left: 7000, //左边的距离
               right: 8,//右边的距离
               top: 0,//上边边的距离
               borderColor: "rgba(43,48,67,0.8)",
               fillerColor: '#33384b',//滑动块的颜色
               backgroundColor: 'rgba(13,33,117,0.5)',//两边未选中的滑动条区域的颜色
               showDataShadow: false,//是否显示数据阴影 默认auto
               showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
               realtime:true, //是否实时更新
               filterMode: 'filter',
               yAxisIndex: [0,1],//控制的y轴
               startValue: 1, // 初始显示值
               
            },
            
            //滑块的属性
            {
                type:'inside',
                yAxisIndex:0,
                start: 0,//默认为1
                zoomOnMouseWheel:false,  //滚轮是否触发缩放
                moveOnMouseMove:true,  //鼠标滚轮触发滚动
                moveOnMouseWheel:true

               
            },
        ],

十、饼图中间加文字、饼图以百分比形式显示（100-value）

 graphic:{       //图形中间文字
                    type:"text",
                    left:"center",
                    top:"center",
                    style:{
                        text:`  ${this.secondValue}% `,
                        textAlign:"center",
                        fill:"#fff",
                        fontSize:14
                    }
                },
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['50%', '75%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    // emphasis: {  //中间显示文字时，这里必须删除
                    //     label: {
                    //     show: true,
                    //     fontSize: '40',
                    //     fontWeight: 'bold'
                    //     }
                    // },
                    labelLine: {
                        show: false
                    },
                    data: [
              {
                value:this.secondValue,
                label: {
                  show: true,
                },
                itemStyle: {
                  color: "rgba(34, 144, 192, 0.6)",
                }
              },
              {
                value: 100 - this.secondValue,
                name: "",
                itemStyle: {
                  color: "rgba(255, 255, 255, 0.2)",
                },
              },
            ],
                    }
                ]

十一、柱状图顶部加文字

 series: [
                {
                data: this.inoculationRateList,
                type: 'bar',
                // barWidth : 20,
                showBackground: true,
                label:{
                    formatter:"{c}"+"%",
                    show:true,
                    position: [130, 3],
                    color:'#fff'
                },
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
                }
            ],

十二、有关Y轴yAxis属性

1.不想要负Y轴，可以直接设置 min:0;

2.想要Y轴都是整数,设置坐标轴最小间隔大小 minInterval: 1 ,注意:只在数值轴或时间轴中（type: ‘value’ 或 ‘time’）有效。你弄个别的,这个设置未必有效了

3.Y轴想展示间隔(一条条横着的间隔线),添加splitLine属性

splitLine: {
   show: true, // 如果不想间隔线,直接设为false
   lineStyle: {
      type: 'dashed', //间隔的类型,'solid''dashed''dotted'三个属性
      color: '#e1e5f0', // 线的颜色
   }
},

4.设置Y轴分割线个数, splitNumber =5,设置5个分割线

5.如何设置双Y轴,就是以前是一个对象,现在多加一个对象

yAxis: [
     {
        type: 'value',
        name: '万元'
     },
     {
        type: 'value',
        name: 'Mwh'
     }]

6.柱状图反转坐标轴

yAxis : [
 2                             {
 3                                
24                                 inverse: true //反转坐标轴
25                             }
26                ]

12、 echarts堆叠柱状图并且显示总数

柱状图堆叠的代码为：

显示总数的代码为。总计，data6.

  var data1 =  [1,1,1,1,1,1]
            var data2 = [1,1,1,1,1,1]
            var data3 = [1,1,1,1,1,1]
            var data6 = function() {
                var datas = [];
                for (var i = 0; i < data1.length; i++) {
                    datas.push(data1[i] + data2[i] + data3[i] );
                }
                return datas;
            }();

  series: [
                {
                // data: this.taxiSeries,
                data:[1,1,1,1,1,1],
                type: 'bar',
                stack: 'total',
                name:'出租车',
                // showBackground: true,
//这个label是每一个柱状图的数据
                // label:{
                //     show:false,
                //     formatter:"{c}" ,
                //     position:[0,10],
                //     color:'#fff'
                // },
                itemStyle:{
                    color:'#0463c1',
                    // barBorderRadius:[18,18,18,18]
                },
                // backgroundStyle: {
                //     color: 'rgba(180, 180, 180, 0.2)'
                // }
                },
                {
                // data: this.privateCarSeries,
                data:[1,1,1,1,1,1],
                type: 'bar',
                name:'私家车',
                stack: 'total',
                // showBackground: true,
                label:{
                    show:false,
                    // formatter:"{c}" ,
                    // position:[0,10],
                    color:'#fff'
                },
                itemStyle:{
                    color:'#bec104',
                },
                },
                {
                // data: this.otherCarSeries,
                data:[1,1,1,1,1,1],
                type: 'bar',
                name:'其他车',
                stack: 'total',
                // showBackground: true,
                label:{
                    show:false,
                    formatter:"{c}" ,
                    // position:[0,10],
                    color:'#fff'
                },
                itemStyle:{
                    color:'#2efcb7',
                    // barBorderRadius:[18,18,18,18]
                },
                // backgroundStyle: {
                //     color: 'rgba(180, 180, 180, 0.2)'
                // }
                },
                {
                        name: '总计',
                        type: 'line',
                        lineStyle:{
                            opacity : 0,
                        },
                        label:{
                            show: true,
                            textStyle:{
                                color:'#fff'
                            }
                        },
                        data: data6
                    }
            ],

  carsEcharts(){
            var chartDom = document.getElementById('carsEcharts');
            var myChart = echarts.init(chartDom);
            var option;
//data123的数据可以是后端返回的数组数据
            var data1 = [1,1,1,1,1,1]
            var data2 = [1,1,1,1,1,1]
            var data3 = [1,1,1,1,1,1]
            var data6 = function() {
                var datas = [];
                for (var i = 0; i < data1.length; i++) {
                    datas.push(data1[i] + data2[i] + data3[i] );
                }
                return datas;
            }();
            option = {
                tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                        type: 'shadow'
                        }
                    },
                legend: {
                        show:true,
                        data:['出租车','私家车','其他车'],
                        itemGap: 10, // 图例之间的间隔
                        itemWidth: 10, // 图例的长宽
                        itemHeight: 10,
                        x:'right',
                        padding:[30,20,40,0],
                        textStyle:{
                            color:'#fff'
                        }
                   
                },
                grid: {
                    left: "13%",
                    right: "13%",
                    top: "30%",
                    bottom: "8%",
                },
            xAxis: {
                type: 'category',
                data: this.dataXaxis,
                axisLine:{
                    show:true
                },
                axisLabel:{
                    show:true,
                    textStyle:{
                        color:'#fff'
                    }
                },
                // splitLine:{
                //     show:false
                // }
            },
            yAxis: {
                type: 'value',
                // data: this.streetDetectionRate,
                minInterval:1,
                axisLine:{
                    show:false
                },
                axisLabel:{ color:'#fff'},
                axisTick:{
                    show:false
                },
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:'rgba(8,8,8,.2)'
                    }
                }
            },
            series: [
                {
                // data: this.taxiSeries,
                data:[1,1,1,1,1,1],
                type: 'bar',
                stack: 'total',
                name:'出租车',
                // showBackground: true,
                // label:{
                //     show:false,
                //     formatter:"{c}" ,
                //     position:[0,10],
                //     color:'#fff'
                // },
                itemStyle:{
                    color:'#0463c1',
                    // barBorderRadius:[18,18,18,18]
                },
                // backgroundStyle: {
                //     color: 'rgba(180, 180, 180, 0.2)'
                // }
                },
                {
                // data: this.privateCarSeries,
                data:[1,1,1,1,1,1],
                type: 'bar',
                name:'私家车',
                stack: 'total',
                // showBackground: true,
                label:{
                    show:false,
                    // formatter:"{c}" ,
                    // position:[0,10],
                    color:'#fff'
                },
                itemStyle:{
                    color:'#bec104',
                    // barBorderRadius:[18,18,18,18]
                },
                // backgroundStyle: {
                //     color: 'rgba(180, 180, 180, 0.2)'
                // }
                },
                {
                // data: this.otherCarSeries,
                data:[1,1,1,1,1,1],
                type: 'bar',
                name:'其他车',
                stack: 'total',
                // showBackground: true,
                label:{
                    show:false,
                    formatter:"{c}" ,
                    // position:[0,10],
                    color:'#fff'
                },
                itemStyle:{
                    color:'#2efcb7',
                    // barBorderRadius:[18,18,18,18]
                },
                // backgroundStyle: {
                //     color: 'rgba(180, 180, 180, 0.2)'
                // }
                },
                {
                        name: '总计',
                        type: 'line',
                        lineStyle:{
                            opacity : 0,
                        },
                        label:{
                            show: true,
                            textStyle:{
                                color:'#fff'
                            }
                        },
                        data: data6
                    }
            ],
            };

            option && myChart.setOption(option);
            },