java echarts.min.js实现统计图表

1.下载echarts.min.js 前端框架
官网URL:
http://echarts.baidu.com/download.html
效果如下图↓
java echarts.min.js实现统计图表_第1张图片

2.echarts.min.js 实现统计图表源码


<html style="height: 100%">
<meta name="ygc" content="com.kero99.ygc.js">
   <head>
       <meta charset="utf-8">
   head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%">div>
       <script type="text/javascript" src="js/echarts.min.js">script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} 
{b} : {c} ({d}%)"
}, legend: { orient: 'vertical', left: 'left', data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, 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:'搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; ; if (option && typeof option === "object") { myChart.setOption(option, true); }
script> body> html>

你可能感兴趣的:(js)