饼图tooltip

@{
    ViewBag.Title = "pie";
}

<h2>pie</h2>

<div id="main" style="width: 1000px;height:800px;"></div>
<script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById(‘main‘), ‘shine‘, { width: 800 });

    option = {
        tooltip: {
            trigger: ‘item‘,
            //formatter: "{a} <br/>{b}: {c} ({d}%)"
            formatter: function (params) {
                var s = params.name + ‘<br />‘;
                for (var i = 0; i < option.series.length; i++) {
                    s += option.series[i].name + ‘: ‘ + option.series[i].data[params.dataIndex].value + ‘(‘ + (option.series[i].data[params.dataIndex].value / jehj[i] * 100).toFixed(2) + ‘%)<br />‘;
                }
                return s;
            }
        },
        legend: {
            orient: ‘vertical‘,
            x: ‘left‘,
            data: [‘直达‘, ‘营销广告‘, ‘搜索引擎‘, ‘邮件营销‘, ‘联盟广告‘, ‘视频广告‘, ‘百度‘, ‘谷歌‘, ‘必应‘, ‘其他‘]
        },
        series: [
            {
                name: ‘2016年‘,
                type: ‘pie‘,
                selectedMode: ‘single‘,
                radius: [0, ‘30%‘],

                label: {
                    normal: {
                        position: ‘inner‘,
                        formatter: "{b}({d}%)"
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    { value: 335, name: ‘直达‘ },
                    { value: 120, name: ‘邮件营销‘ },
                    { value: 134, name: ‘联盟广告‘ },
                    { value: 235, name: ‘视频广告‘ },
                    { value: 448, name: ‘百度‘ },
                    { value: 351, name: ‘谷歌‘ },
                    { value: 247, name: ‘必应‘ },
                    { value: 302, name: ‘其他‘ }
                ]
            },
            {
                name: ‘2017年‘,
                type: ‘pie‘,
                radius: [‘40%‘, ‘55%‘],

                data: [
                    { value: 335, name: ‘直达‘ },
                    { value: 310, name: ‘邮件营销‘ },
                    { value: 234, name: ‘联盟广告‘ },
                    { value: 135, name: ‘视频广告‘ },
                    { value: 1048, name: ‘百度‘ },
                    { value: 251, name: ‘谷歌‘ },
                    { value: 147, name: ‘必应‘ },
                    { value: 102, name: ‘其他‘ }
                ],
                label: {
                    normal: {
                        //position: ‘inner‘,
                        formatter: "{b}: {c} ({d}%)"
                    }
                }
            }
        ]
    };
    var jehj = new Array();
    for (var i = 0; i < option.series.length; i++) {
        var hj = 0;
        for (var j = 0; j < option.series[i].data.length; j++) {
            hj += option.series[i].data[j].value;
        }
        jehj[i] = hj;
    }
    myChart.setOption(option);

</script>

时间: 2024-08-04 13:55:15

饼图tooltip的相关文章

Highcharts.js -纯javasctipt图表库初体验

一.highcharts简介以及引入 highcharts作为免费提供给个人学习.个人网站和非商业用途使用的前端图表演示插件的确使用起来十分方便和轻便.在我最近完成一个需求的时候用到了它, 它的兼容性也很强,其在标准(W3C标准)浏览器中使用SVG技术渲染图形,在遗留的IE浏览器中使用VML技术来绘图.我们在使用highcharts的时候只需要引入highcharts.js 及 jQuery . MooTools .Prototype .Highcharts Standalone Framewo

highCharts 饼图动态加载

饼图的动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath()%>/boot_js/jquery/jquery-1.8.3.min.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>

Highcharts+Spring饼图使用实例

项目上要用到Hightcharts展示平台机器占用情况,使用这类第三方插件很方便就能实现 JSP: <script type="text/javascript" src="<%=basePath%>/resources/thirdparty/highcharts/highcharts.js"></script> <div id="machineRate" title="按产品线统计机器占比&qu

4-Highcharts 3D图之3D普通饼图

<!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts 3D图之3D普通饼图</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="../jquery-2.1.4/jquery.min.js"&g

Highcharts之饼图

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <title>Highcharts饼图举例</title> 7 <style type="text/css"></style> 8 &

百度ECHARTS 饼图使用心得 处理data属性

做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echarts的饼图的心得. 先给大家看一下简单地效果图:(鼠标移动到1.0时) 使用echarts,可以去官网 http://echarts.baidu.com/下载完整源码或者定制自己需要的模块. 使用起来很简单,首先先引用js源文件,再在js中初始化即可: <script src="/js/ec

百度推出的echarts,制表折线图柱状图饼图等的超级工具

一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts的简介: ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRen

Highchart :tooltip工具提示

Highcharts翻译系列之十六:tooltip工具提示tooltip工具提示 参数 描述 默认值 animation 启用或禁用提示的动画.这对大数据量的图表很有用 true backgroundColor 提示的背景色或者渐变色 rgba(255 255,  255, 0.85) borderColor 提示的边框颜色 auto borderRadius 边框圆角的半径 5.0 borderWidth 边框的宽度 2.0 crosshairs 显示十字线,把点和它们的轴值连接起来.十字线可

饼图报表的实现

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>PlanStatistics</title> 5 <script type="text/javascript" src="@Url.Content("~/js/jquery-1.7.1.min.js")"></script> 6 <script type="t