ECHARTS 使用记录

蔚落 2024-02-17 20:25 79阅读 0赞

1、Y轴如何显示百分比。

option = {
        color: ['#3398DB'],
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b}：({c} %)"
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['24岁以下', '24岁到30岁', '31到35岁', '36岁到40岁', '41岁及以上'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                min : 0,
                max : 100,
                axisLabel:{
                    formatter: '{value} %'
                }
    
    
            }
        ],
        series : [
            {
                name:'用户数',
                type:'bar',
                barWidth: '60%',
                data:[10,10,10,10,60],
                itemStyle:{
                    normal:{
                        lable:{
                        show:true,
                        formatter:'{a}%'
                        }
                    }
                }
            }
        ]
    };

发表评论取消回复

表情：

评论列表（有 0 条评论，79人围观）

还没有评论，来说两句吧...

相关阅读

相关 ECHARTS 使用记录

1、Y轴如何显示百分比。 option = { color: ['3398DB'], tooltip : {

蔚落/ 2024年02月17日 20:25/ 0 赞/ 80 阅读

相关在vue项目中使用echarts（echarts不显示，echarts使用详细）

简述：我们在写大屏项目和vue项目时经常会用到echarts，用于数据统计和可视化，它是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的

男娘i/ 2023年10月08日 22:14/ 0 赞/ 115 阅读

相关 vue使用Echarts设置数据无效问题记录

目录场景：遇到的问题：最终解决方案：小结： -------------------- 场景： > 做一个动态的柱状图，模拟socket效果，如图所示：

小咪咪/ 2023年09月28日 19:17/ 0 赞/ 180 阅读

相关 echart仪表盘旋转_使用echart仪表盘

温度仪表盘 window.οnlοad=function()\{varmyChart=echarts.init(document.getElementById('temper

你的名字/ 2022年10月31日 01:34/ 0 赞/ 414 阅读

相关 echarts常见问题记录（持续更新）

echarts一些问题记录 resize实时改变图表尺寸 formatter解析html标签图表布局位置调

川长思鸟来/ 2022年10月28日 03:50/ 0 赞/ 538 阅读

相关 echarts使用的一些基本问题——记录一下

柱状图颜色怎么改？ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

末蓝、/ 2022年10月13日 14:54/ 0 赞/ 84 阅读

相关 echart使用

<!DOCTYPE html> <head> <meta charset="utf-8"> <title>折线图</title> <sc

落日映苍穹つ/ 2022年08月07日 08:49/ 0 赞/ 287 阅读

相关 ECharts-JavaScript图表库学习记录

时间：2017年5月23日13:51:42 [《我的博客地图》][Link 1] 前端开发是一个需要不断学习和进步的岗位，各个前端技术社区活跃度呈现指数增长，

以你之姓@/ 2022年06月15日 03:47/ 0 赞/ 317 阅读

相关 Echarts学习记录——不等距折线图

Echarts学习记录——不等距折线图需求横坐标为一个区间，折线的每个点在区间内展示。如横坐标是24小时的时间点，其中展示每个小时内某个时间点的数值。如下

r囧r小猫/ 2022年06月14日 06:07/ 0 赞/ 293 阅读

相关 Echart使用

一五分钟入门ECharts 1 简介 ECahrs是百度的一个项目，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据

我会带着你远行/ 2021年07月24日 16:04/ 0 赞/ 706 阅读