zoukankan      html  css  js  c++  java
  • Echarts饼状图

    <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="js/esl.js"></script>
    </head>
    <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
    <script type="text/javascript">
    // 路径配置
    require.config({
    paths:{
    'echarts' : 'js/echarts',
    'echarts/chart/pie' : 'js/echarts'
    }
    });


    // 使用
    require(
    [
    'echarts',
    'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载
    ],
    function (ec) {
    // 基于准备好的dom,初始化echarts图表
    var myChart = ec.init(document.getElementById('main'));

    option = {
    title : {
    text: '某站点用户访问来源',
    subtext: '纯属虚构',
    x:'center'
    },
    tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
    orient : 'vertical',
    x : 'left',
    data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    toolbox: {
    show : true,
    feature : {
    mark : {show: true},
    dataView : {show: true, readOnly: false},
    restore : {show: true},
    saveAsImage : {show: true}
    }
    },
    calculable : true,
    series : [
    {
    name:'访问来源',
    type:'pie',
    radius : '55%',
    center: ['50%', '60%'],
    data:[
    {value:335, name:'直接访问'},
    {value:310, name:'邮件营销'},
    {value:234, name:'联盟广告'},
    {value:135, name:'视频广告'},
    {value:1548, name:'搜索引擎'}
    ]
    }
    ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
    }
    );
    </script>
    </body>

  • 相关阅读:
    JS小技巧总汇
    [转贴]聪明人如何拯救你的职业困
    Button按钮多行显示的实现方法
    事件和委托
    支持~
    关于递归
    Android 资源的国际化
    Android 文件的浏览(类似于FileDialog的功能)
    Android 开发TCP、UdP客户端
    Android 为什么现在google不让结束整个程序,只让结束单个Activity(转)
  • 原文地址:https://www.cnblogs.com/lvlina/p/6086291.html
Copyright © 2011-2022 走看看