【获取资源】

进入官网，    http://echarts.baidu.com/

导航，下载，下拉框下载，常用303k。就是这么简单，就个一个js。

【项目使用】

新建项目，MyChart

具体使用的过程中，可以参考  http://echarts.baidu.com/首页的【实例】，把实例的代码粘贴到自己的项目中就ok啦。

 如果想修改配置参数，以便达到自己的效果。

 可以参考  http://echarts.baidu.com/  首页，    文档，下拉   【配置项手册】

实例中数据都是静态的，可以通过后台动态绑定数据，或者ajax动态获得数据。

 
 {圆饼形}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MyChart.Index" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="echart/echarts.common.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
  <!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    </form>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        var tleft = <%=LeftTitle %>;
        tleft = $.parseJSON(tleft);
 
        var val = <%=TitleVal %>
        val = $.parseJSON(val);
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '<%=charTitle %>',
                subtext:'<%=charTitle2 %>' ,
                left :'center'
            },
            tooltip: {
//                trigger: 'item'
//                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: tleft
            },
            series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: val,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
 
    </script>
 <%--    <script type="text/javascript">
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('main'));
 
       
 
 
         // 指定图表的配置项和数据
         var option = {
             title: {
                 text: 'ECharts 入门示例'
             },
             tooltip: {},
             legend: {
                 data: ['销量2', '销量1']
             },
             xAxis: {
             data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "袜子2"]
 
             },
             yAxis: {},
             series: [{
                 name: ['销量2'],
                 type: 'bar',
                 data: [5, 20, 36, 10, 10, 20,100]
             }
             ,
             {
                 name: ['销量1'],
                 type: 'bar',
                 data: [5, 20, 36, 10, 10, 20,50]
             }
             ]
         };
 
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
 
 
 
 
 
 
 
 
    </script>--%>
</body>
</html>

后台，
 

using System;

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Text;
 
namespace MyChart
{
    public partial class Index : System.Web.UI.Page
    {
 
        public string charTitle = "";
        public string charTitle2 = "";
        public string LeftTitle = "";
        public string TitleVal = "";
 
        protected void Page_Load(object sender, EventArgs e)
        {
 
            //模拟从数据库获取数据
            DataTable dt = new DataTable();
            DataColumn c1 = new DataColumn("name", typeof(string));
            DataColumn c2 = new DataColumn("value", typeof(string));
 
            dt.Columns.AddRange(new DataColumn[] { c1, c2 });
 
            DataRow r1 = dt.NewRow();
            r1["name"] = "张三";
            r1["value"] = "25";
 
            DataRow r2 = dt.NewRow();
            r2["name"] = "李四";
            r2["value"] = "30";
 
            DataRow r3 = dt.NewRow();
            r3["name"] = "王五";
            r3["value"] = "40";
 
            DataRow r4 = dt.NewRow();
            r4["name"] = "赵六";
            r4["value"] = "19";
 
            DataRow r5 = dt.NewRow();
            r5["name"] = "田七";
            r5["value"] = "30";
 
            dt.Rows.Add(r1); dt.Rows.Add(r2); dt.Rows.Add(r3); dt.Rows.Add(r4); dt.Rows.Add(r5);
 
 
            string sbLeftItemStr = "";//左侧项目名称
            StringBuilder sbLeftItem = new StringBuilder();
            sbLeftItem.Append("'[");
 
            string sbLeftItemStrVal = "";//左侧项目名称值
            StringBuilder sbLeftItemVal = new StringBuilder();
            sbLeftItemVal.Append("'[");
 
            int count = dt.Rows.Count;
            int c = -1;
            foreach (DataRow item in dt.Rows)
            {
                c++;
                if (c == (count - 1))
                {
                    sbLeftItem.Append("\"" + item["name"] + "\"");
                }
                else
                {
                    sbLeftItem.Append("\"" + item["name"] + "\"" + ",");
                }
 
 
                if (c == (count - 1))
                {
                    sbLeftItemVal.Append("{\"name\":\"" + item["name"] + "\",\"value\":\"" + item["value"] + "\"}");
                }
                else
                {
                    sbLeftItemVal.Append("{\"name\":\"" + item["name"] + "\",\"value\":\"" + item["value"] + "\"}" + ",");
                }
 
 
 
 
            }
 
            sbLeftItemStr = sbLeftItem.Append("]'").ToString();
 
            sbLeftItemStrVal = sbLeftItemVal.Append("]'").ToString();
            LeftTitle = sbLeftItemStr;
            TitleVal = sbLeftItemStrVal;
            //标题
            charTitle = "阿杜查表测试";//标题
            charTitle2 = "By阿杜";//副标题
 
 

线形，柱形，条形数据表（百度Echart插件）的更多相关文章

  1. [Swift通天遁地]三、手势与图表-(5)创建带有标题、图例、坐标轴的柱形图表

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. 百度echart如何动态生成图表

    百度echart如何动态生成图表 一.总结 一句话总结: clear hideloading setOption 主要是下面三行代码: myChart.clear(); //清空画布myChart.h ...

  3. [Swift通天遁地]三、手势与图表-(12)创建复合图表：包含线性图表和柱形图表

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  4. 百度echart使用心得，百度图表。

    百度echart算是百度针对数据展示做的一个图表插件吧,一般我们使用都不是问题,主要还是对于对动态数据的解析.我这里使用饼状图,和柱状图为例: 首先,我们需要定义一个绘图的容器:(class是我自己定 ...

  5. MySQL(一) 数据表数据库的基本操作

    序言 这类文章,记录我看<MySQL5.6从零开始学>这本书的过程,将自己觉得重要的东西记录一下,并有可能帮助到你们,在写的博文前几篇度会非常基础,只要动手敲,跟着我写的例子全部实现一遍, ...

  6. 19数据表的创建-普通表&临时表-天轰穿大话数据库视频教程

    关键字:数据表 数据库性能 临时表 天轰穿 sqlserver 数据库大纲:数据表的特点,数据表的类型及用法,SQL创建数据表,创建临时表,全局临时表 优酷超清地址 腾讯超清地址 原文地址:http: ...

  7. hibernate中.hbm.xml和注解方式自动生成数据表的简单实例(由新手小白编写，仅适用新手小白)

    绝逼新手小白,so 请大神指点! 如果真的错的太多,错的太离谱,错的误导了其他小伙伴,还望大神请勿喷,大神请担待,大神请高抬贵嘴......谢谢. 好了,正题 刚接触ssh,今天在搞使用.hbm.xm ...

  8. SQL Server 2008空间数据应用系列五：数据表中使用空间数据类型

    原文:SQL Server 2008空间数据应用系列五:数据表中使用空间数据类型 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft SQL Server 2008 R2调测 ...

  9. 统计各个数据库的各个数据表的总数，然后写入到excel中

    1.最近项目基本进入最后阶段了,然后会统计一下各个数据库的各个数据表的数据量,开始使用的报表工具,report-designer,开源的,研究了两天,发现并不是很好使,最后自己下班回去,晚上思考,想着 ...

随机推荐

  1. [改善Java代码]在明确的场景下,为集合指定初始容量

    我们经常使用ArrayList,Vector,Hashmap等集合,一般都是直接用new跟上类名声明出一个集合来,然后使用add,remove,等方法进行操作,而且因为它们是自动管理长度的,所以不用我 ...

  2. 练习题之Wait/Notify

    方案一: public class PrintABC { public static void main(String[] args) { AtomicInteger synObj = ); Runn ...

  3. hdu 4619 最大匹配问题

    思路:把所有涉及到的点按(x+y)的奇偶分成两部分点,对所有的1*2的骨牌,都有(x+y)为偶数的建到奇数的边.求一次最大匹配,就是答案. #include<iostream> #incl ...

  4. IOS下视频监控项目总结

    一.项目说明 二.技术点 1.数据缓存 2.storyboard的使用 3.h264码流数据的解码 4.UDP通讯 三.解决方案 四.总结 五.相关资料

  5. 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10（转）

     在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html&g ...

  6. less-3-混合

    混合特性类似于编程语言中的继承.设计好一个样式类,然后再其他样式中直接混合这个样式类,实现样式的继承重用.就像函数一样调用,并且可以传递参数,功能非常强大,实用. less代码: 生成的css代码: ...

  7. InternetOpen怎么使用代理

    如果你用IE的默认代理设置:hinternet=InternetOpen(AfxGetAppName(),INTERNET_OPEN_TYPE_PROXY,NULL,NULL,0); 把INTERNE ...

  8. .net System.Net.Mail 之用SmtpClient发送邮件 Demo

    private static bool sendMail() { try { //接收人邮箱 string SendTo = "XXXXX@163.com"; //抄送人邮箱 st ...

  9. 解决ASP.NET网站发布问题

    目录 前言 开始 aspx.cs文件放到单独的类库项目 一个可选择勾选页面的发布工具:LimusicAddin 前言 Asp.net 发布分为:动态编译和预编译.预编译又分为:In Place Pre ...

  10. Unity Rigidbody 刚体中的Angular Drag和Freeze Position/Rotation

    Rigidbody中 Angular Drag  (角阻力):同样指的是空气阻力,只不过是用来阻碍物体旋转的.如果设置成无限的话,物体会立即停止旋转.如果设置成0,物体在上升过程中,会发生侧翻旋转. ...