• Echarts插件


    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
    + request.getServerName() + ":" + request.getServerPort()
    + path;
    %>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>2011-2014取得备案公示/持证影视制作机构数量变化</title>
    </head>
    <body style="background-color: #000000;">
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:100%;width:100%;"></div>
    <!-- ECharts单文件引入 -->
    <script src="<%=basePath%>/echarts/echarts-2.2.4/doc/asset/js/jquery.min.js"></script>
    <script src="<%=basePath%>/echarts/echarts-2.2.4/build/dist/echarts.js"></script>
    <script src="<%=basePath%>/echarts/echarts-2.2.4/build/dist/chart/dark.js"></script>
    <script type="text/javascript">
    // 路径配置
    require.config({
    paths: {
    echarts: '<%=basePath%>/echarts/echarts-2.2.4/build/dist'
    }
    });

    // 使用
    require(
    [
    'echarts',

    'echarts/chart/bar', // 使用柱状图就加载bar模块,按需加载

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

    var option = {
    tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
    orient : 'horizontal',
    x : 'left',
    data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    toolbox: {
    show : false,
    feature : {
    mark : {show: true},
    dataView : {show: true, readOnly: false},
    magicType : {
    show: true,
    type: ['pie', 'funnel'],
    option: {
    funnel: {
    x: '25%',
    '50%',
    funnelAlign: 'center',
    max: 1548
    }
    }
    },
    restore : {show: true},
    saveAsImage : {show: true}
    }
    },
    calculable : true,
    series : [
    {
    name:'访问来源',
    type:'pie',
    radius : ['10%', '70%'],
    itemStyle : {
    normal : {
    label : {
    show : false
    },
    labelLine : {
    show : false
    }
    },
    emphasis : {
    label : {
    show : true,
    position : 'center',
    textStyle : {
    fontSize : '10',
    fontWeight : 'bold'
    }
    }
    }
    },
    data:[
    {value:335, name:'直接访问'},
    {value:310, name:'邮件营销'},
    {value:234, name:'联盟广告'},
    {value:135, name:'视频广告'},
    {value:1548, name:'搜索引擎'}
    ]
    }
    ]
    };

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

  • 相关阅读:
    DOM节点删除之empty()和remove()的有参用法和无参用法
    DOM外部插入insertAfter()与insertBefore()
    DOM内部插入prepend()与prependTo()
    DOM外部插入after()与before()
    DOM内部插入append()与appendTo()
    jQuery节点创建与属性的处理 创建节点
    jQuery的属性与样式之元素的数据存储
    jQuery的属性与样式之样式操作.css()
    jQuery的属性与样式之切换样式.toggleClass()
    jQuery的属性与样式之增加样式.addClass()
  • 原文地址:https://www.cnblogs.com/wshsdlau/p/4667518.html
Copyright © 2020-2023  润新知