zoukankan      html  css  js  c++  java
  • echart自定义堆叠柱状图,每个矩形框都可以出现不同的tooltip内容

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>堆叠柱状图</title>
        <style>
            .m-main{margin: 200px; 550px;height:10px;}
        </style>
    </head>
    
    <body>
        <div id="main" class="m-main"></div>
        <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.1/echarts.js"></script>
        <script type="text/javascript">
        let myChart = echarts.init(document.getElementById('main'));
    
        var data = [
            [0, 16, 5, {
                name: '资产名称1',
                num: 16,
                persent: '35%'
            }],
            [16, 18, 5, {
                name: '资产名称2',
                num: 16,
                persent: '35%'
            }],
            [18, 26, 5, {
                name: '资产名称3',
                num: 16,
                persent: '35%'
            }],
            [26, 32, 5, {
                name: '资产名称4',
                num: 16,
                persent: '35%'
            }],
            [32, 56, 5, {
                name: '资产名称5',
                num: 16,
                persent: '35%'
            }],
            [56, 62, 5, {
                name: '资产名称6',
                num: 16,
                persent: '35%'
            }]
        ];
        var colorList = ['#4f81bd', '#c0504d', '#9bbb59', '#604a7b', '#948a54', '#e46c0b'];
    
        data = echarts.util.map(data, function(item, index) {
            return {
                value: item,
                itemStyle: {
                    normal: {
                        color: colorList[index]
                    }
                }
            };
        });
    
        function renderItem(params, api) {
            var yValue = api.value(2);
            var start = api.coord([api.value(0), yValue]);
            var size = api.size([api.value(1) - api.value(0), yValue]);
            var style = api.style();
    
            return {
                type: 'rect',
                shape: {
                    x: start[0],
                    y: start[1],
                     size[0],
                    height: size[1]
                },
                style: style
            };
        }
    
        let option = {
            tooltip: {
                formatter: (params, ticket, callback) => {
                    let info = params.data.value[3];
                    let name = info.name;
                    let num = info.num;
                    let persent = info.persent;
                    return `
                    <div>
                        <div>${name}</div>
                        <div>${num}(${persent})</div>
                    </div>
                    `
                }
            },
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },
            series: [{
                type: 'custom',
                renderItem: renderItem,
                label: null,
                dimensions: ['from', 'to', 'profit'],
                encode: {
                    x: [0, 1],
                    y: 2,
                    tooltip: [0, 1, 2],
                    itemName: 3
                },
                data: data
            }]
        };
        myChart.setOption(option);
        </script>
    </body>
    
    </html>
  • 相关阅读:
    Web前端学习第五天——————HTML篇.019页面布局练习
    1111
    开发者如何利用数据分析提高收入
    开发者进行广告合作的几大误区
    高仿人人Android梦想版终极源码发送(转)
    移动开发者如何获取免费流量
    Inno setup常用代码【收藏】
    Inno setup常用代码补充【收藏】
    QT for Window程序部署
    Inno Setup自定义卸载文件名称【收藏】
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924750.html
Copyright © 2011-2022 走看看