echarts例子中的tip

最新推荐文章于 2025-03-20 09:23:28 发布

ActionReaction

最新推荐文章于 2025-03-20 09:23:28 发布

阅读量3.4k

点赞数

本文链接：https://blog.youkuaiyun.com/ActionReaction/article/details/20722231

版权

这篇博客介绍了如何在Echarts中对个别数据项的tooltip进行个性化定义，通过使用对象形式的series.data，可以设置自定义的tooltip和itemStyle。同时，总结了模块化引入ECharts的四个步骤，包括使用模块加载器、准备DOM、配置ECharts路径以及动态加载并初始化Echarts。

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

legend: {
        orient : 'vertical',
        x : document.getElementById('main').offsetWidth / 2,  //按偏移量设置
        y : 55,
        itemGap:12,
        data:['68%的人表示过的不错','29%的人表示生活压力很大','3%的人表示“我姓曾”']
    },

series.data

当需要对个别内容进行个性化定义时，数组项可用对象，如：

[
    12, 34,
    {
        value : 56,
        tooltip:{},             //自定义特殊tooltip，仅对该item有效，详见tooltip
        itemStyle:{}            //自定义特殊itemStyle，仅对该item有效，详见itemStyle
    },
    ..., 10, 23
]

var dataStyle = {
    normal: {
        label: {show:false},
        labelLine: {show:false}
    }
};
var placeHolderStyle = {
    normal : {
        color: 'rgba(0,0,0,0)',
        label: {show:false},
        labelLine: {show:false}
    },
    emphasis : {
        color: 'rgba(0,0,0,0)'
    }
};
option = {
    color: ['green', 'orange', 'brown'],
    title: {
        text: '你幸福吗？',
        subtext: 'From ExcelHome',
        sublink: 'http://e.weibo.com/1341556070/AhQXtjbqh',
        x: 'center',
        y: 'center',
        itemGap: 20,
        textStyle : {
            color : 'rgba(30,144,255,0.8)',
            fontFamily : '微软雅黑',
            fontSize : 35,
            fontWeight : 'bolder'
        }
    },
    tooltip : {
        show: true,
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : document.getElementById('main').offsetWidth / 2,
        y : 55,
        itemGap:12,
        data:['68%的人表示过的不错','29%的人表示生活压力很大','3%的人表示“我姓曾”']
    },
    toolbox: {
        show : true,
        feature : {
            mark : true,
            dataView : {readOnly: false},
            restore : true,
            saveAsImage : true
        }
    },
    series : [
        {
            name:'1',
            type:'pie',
            radius : [150, 125],
            itemStyle : dataStyle,
            data:[
                {
                    value:68,
                    name:'68%的人表示过的不错'
                },
                {
                    value:32,
                    name:'invisible',
                    itemStyle : placeHolderStyle
                }
            ]
        },
        {
            name:'2',
            type:'pie',
            radius : [125, 100],
            itemStyle : dataStyle,
            data:[
                {
                    value:29, 
                    name:'29%的人表示生活压力很大'
                },
                {
                    value:71,
                    name:'invisible',
                    itemStyle : placeHolderStyle
                }
            ]
        },
        {
            name:'3',
            type:'pie',
            radius : [100, 75],
            itemStyle : dataStyle,
            data:[
                {
                    value:3, 
                    name:'3%的人表示“我姓曾”'
                },
                {
                    value:97,
                    name:'invisible',
                    itemStyle : placeHolderStyle
                }
            ]
        }
    ]
};

总结来说，模块化如何引入ECharts，你都需要如下4步：

引入一个模块加载器，如esl.js或者require.js
为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
为模块加载器配置echarts的路径，从当前页面链接到echarts.js，见上述说明
动态加载echarts然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）