zoukankan      html  css  js  c++  java
  • ECharts是我接触过的最优秀的可视化工具,也是进步最快的软件,希望它早日成为世界级的开源项目。

    ECharts的广泛网址:

    http://echarts.baidu.com/doc/example.html

    零编程玩转图表:

    http://tushuo.baidu.com/?qq-pf-to=pcqq.c2c

    结合使用做的你想做的图表吧!

    <%@ page language="java" contentType="text/html; charset=gbk"
    pageEncoding="gbk"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">
    <title>Insert title here</title>
    <%@ include file="/WEB-INF/tgp-pages/common/common-var.jsp"%>
    <script type="text/javascript"
    src="${root}/echarts/build/dist/echarts.js"></script>
    <script type="text/javascript"
    src="${root}/echarts/build/dist/echarts-all.js"></script>

    <script type="text/javascript"
    src="${root}/echarts/doc/asset/js/esl/esl.js"></script>

    </head>
    <body>
    <div id="mainMap" style="height: 500px;" ></div>
    <script type="text/javascript">
    // 基于准备好的dom,初始化echarts图表
    var option;
    /*$(document).ready(function(){
    $.ajax({
    url: "/TBPWeb/sbjk/equipinfo/substation/stationDao.jsp?method=getStation",
    contentType : "application/x-www-form-urlencoded;charset=utf-8",
    type : "post",
    datatype : "json",
    async : false,
    success: function (text) {
    id = text;
    }
    });
    });*/
    var myChart = echarts.init(document.getElementById('mainMap'));

    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: true
    },
    restore: {
    show: true
    },
    saveAsImage: {
    show: true
    }
    }
    },
    calculable: true,
    series: [
    {
    name: "访问来源",
    type: "pie",
    radius: "55%",
    center: ["50%", "60%"],
    itemStyle: {
    normal: {
    label: {
    show: true,
    formatter: "{b}: {c} ({d}%)"
    }
    }
    },
    data: [
    {
    value: 335,
    name: "主变"
    },
    {
    value: 310,
    name: "断路器"
    },
    {
    value: 234,
    name: "线路"
    },
    {
    value: 135,
    name: "刀闸"
    },
    {
    value: 148,
    name: "母线"
    }
    ]
    }
    ]
    };

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

  • 相关阅读:
    自己的思考
    spring MVC整合freemarker
    手把手教你搭建SpringMVC——最小化配置
    深入hibernate的三种状态
    maven 构建slf4j1.7.7之简单测试与源码解析
    maven 构建slf4j1.7.7之简单测试与源码解析
    (转)URI和URL的区别
    Spring缓存机制的理解
    (转)oracle 高水位线详解
    (转)PL/SQL Developer使用技巧、快捷键
  • 原文地址:https://www.cnblogs.com/jhmyuan/p/4719596.html
Copyright © 2011-2022 走看看