Echarts - 柱状图（Simple Encode）样式修改

blueTou

已于 2024-03-22 00:00:34 修改

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：数据可视化文章标签： echarts javascript 前端

于 2019-08-23 23:21:05 首次发布

本文链接：https://blog.youkuaiyun.com/tangrp/article/details/100047461

数据可视化专栏收录该内容

5 篇文章

订阅专栏

本文详细解析了ECharts图表库的数据可视化配置方法，通过一个具体示例展示了如何设置数据源、提示框样式、坐标轴隐藏、颜色映射等关键配置项，帮助读者掌握ECharts的高级定制技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var option = {
    dataset: {
        source: [
            ['score', 'amount', 'product'],
            [89.3, 58212, 'xxxx一二三四五'],
            [57.1, 78254, 'xxx一二四'],
            [74.4, 41032, 'xxxx一三四'],
            [50.1, 12755, 'xxxx二三四'],
            [89.7, 20145, 'xxx一二'],
            [68.1, 79146, 'xxx一四'],
            [19.6, 91852, 'xxx三四'],
            [10.6, 101852, 'xx二三'],
            [32.7, 20112, 'x四']
        ]
    },
    tooltip: {
        trigger: 'axis',
        // 重写提示框内容样式
        formatter: function (params, ticket, callback) {
            var showHtm=params[0].data[2]+'<br>';
            showHtm+= '断点率: ' + params[0].data[0] + '%<br>'
            showHtm+= '断点次数: ' + params[0].data[1] + '<br>'
            return showHtm;
    }
    },
    grid: {containLabel: true},
    xAxis: {
        show:false,
        axisLine:{
            show:false
        },
        axisTick:{
            show:false
        },
        splitLine:{
            show:false
        }
    },
    yAxis: {
        type: 'category',
        axisLine:{
            show:false
        },
        axisTick:{
            show:false
        },
         splitLine:{
            shwo:false
        },
        axisLabel : 
        {
        // 刻度标签的内容格式器
         formatter : function (value)
         {
             let valueTxt = '';
             if (value.length > 7) {
                 valueTxt = value.substring(0, 7) + '...';
             }
             else {
              valueTxt = value;
            }
            return valueTxt ;
            }
        }
    },
    visualMap: {
        orient: 'horizontal',
        left: 'center',
        min: 10,
        max: 100,
        show:false,
        // text: ['High Score', 'Low Score'],
        // Map the score column to color
        dimension: 0,
        inRange: {
            color: ['#bbb', '#000']
        }
    },
    series: [
        {
            type: 'bar',
            label:{
                show:true,
                position:'insideRight',
                formatter:function(params) {
                    return params.value[0]+"%";
                }
            },
            encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
            }
        }
    ]
};