echarts之--柱状图-%显示

简介: echarts之--柱状图-%显示

测试地址


https://www.echartsjs.com/examples/zh/editor.html?c=bar-tick-align


 var option = {
            title: {
              text: "存储条件(基本单位数量)", //标题
              padding: [12, 4], //距离上下4px
              x: "center", //居中
              textStyle: {
                color: "#3398DB", //主标题的颜色
                fontSize: "18" //主标题的大小
              },
            },
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                formatter:'{c}%',       //这是关键,以百分比的形式显示
                axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                    type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                      {  
                                type: 'value',  
                                axisLabel: {  
                                    show: true,  
                                    interval: 'auto',  
                                    formatter: '{value} %'  
                                    },  
                                show: true  
                        }  
                    ],
            label: {
                                show: true,
                                position: 'top',
                                formatter: '{b}\n{c}%' //在柱状图的顶部显示出某个东西和这个东西的百分比值
                    },
            series : [
                {
                    name:'直接访问',
                    type:'bar',
                    barWidth: '60%',
                    data:[10, 52, 20, 34, 39, 30, 20]
                }
            ]
        };


1425695-20190903131100893-59025315.png

相关文章
|
1月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
42 0
|
7月前
|
JSON 前端开发 数据格式
【前端统计图】echarts实现简单柱状图
【前端统计图】echarts实现简单柱状图
65 0
|
7月前
ECharts 柱状图横轴(X轴)文字内容显示不全
ECharts 柱状图横轴(X轴)文字内容显示不全
168 0
|
5天前
|
JavaScript Apache 容器
如何使用ECharts制作一个简单的柱状图
如何使用ECharts制作一个简单的柱状图
11 0
|
7月前
echarts设置柱状图柱状图粗细大小
echarts设置柱状图柱状图粗细大小
96 1
|
7月前
|
BI
echarts柱状图实现颜色渐变效果
echarts柱状图实现颜色渐变效果
81 1
|
1月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
1月前
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
147 0
|
6月前
Echarts 柱状图添加标记 最大值 最小值 平均值
Echarts 柱状图添加标记 最大值 最小值 平均值
|
6月前
|
容器
Echarts 最简单创建柱状图
Echarts 最简单创建柱状图