【获取资源】
进入官网, 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" %>
<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阿杜";//副标题
- [Swift通天遁地]三、手势与图表-(5)创建带有标题、图例、坐标轴的柱形图表
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 百度echart如何动态生成图表
百度echart如何动态生成图表 一.总结 一句话总结: clear hideloading setOption 主要是下面三行代码: myChart.clear(); //清空画布myChart.h ...
- [Swift通天遁地]三、手势与图表-(12)创建复合图表:包含线性图表和柱形图表
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 百度echart使用心得,百度图表。
百度echart算是百度针对数据展示做的一个图表插件吧,一般我们使用都不是问题,主要还是对于对动态数据的解析.我这里使用饼状图,和柱状图为例: 首先,我们需要定义一个绘图的容器:(class是我自己定 ...
- MySQL(一) 数据表数据库的基本操作
序言 这类文章,记录我看<MySQL5.6从零开始学>这本书的过程,将自己觉得重要的东西记录一下,并有可能帮助到你们,在写的博文前几篇度会非常基础,只要动手敲,跟着我写的例子全部实现一遍, ...
- 19数据表的创建-普通表&临时表-天轰穿大话数据库视频教程
关键字:数据表 数据库性能 临时表 天轰穿 sqlserver 数据库大纲:数据表的特点,数据表的类型及用法,SQL创建数据表,创建临时表,全局临时表 优酷超清地址 腾讯超清地址 原文地址:http: ...
- hibernate中.hbm.xml和注解方式自动生成数据表的简单实例(由新手小白编写,仅适用新手小白)
绝逼新手小白,so 请大神指点! 如果真的错的太多,错的太离谱,错的误导了其他小伙伴,还望大神请勿喷,大神请担待,大神请高抬贵嘴......谢谢. 好了,正题 刚接触ssh,今天在搞使用.hbm.xm ...
- SQL Server 2008空间数据应用系列五:数据表中使用空间数据类型
原文:SQL Server 2008空间数据应用系列五:数据表中使用空间数据类型 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft SQL Server 2008 R2调测 ...
- 统计各个数据库的各个数据表的总数,然后写入到excel中
1.最近项目基本进入最后阶段了,然后会统计一下各个数据库的各个数据表的数据量,开始使用的报表工具,report-designer,开源的,研究了两天,发现并不是很好使,最后自己下班回去,晚上思考,想着 ...
随机推荐
- 关于JDK中的集合总结(二)
1.2版本的JDK才出现的java集合框架. 下面介绍说一下Vector的一些特点. import java.util.Enumeration; import java.util.Iterator; ...
- C#电脑自动关机代码指令
Process p = new Process();//实例化一个独立进程 p.StartInfo.FileName = "cmd.exe";//进程 ...
- css cursor url用法格式详解
css cursor url用法格式:css:{cursor:url('图标路径'),auto;} //IE,FF,chrome浏览器都可以 实例代码:html{cursor: url("h ...
- CSS3—3D翻转
本案例主要是css3和html5,不会js也可以做动画◕.◕ 一.首先看下主要需要的样式: perspective transform transition position classList 就这 ...
- 关于css制作圆角
三个阶段: 1.背景图片: 2.css2.0+标签模拟圆角: 3.css3.0圆角属性(border-radius). 1.1.背景图片--宽度固定,高度自适应圆角 为容器设置宽度 在主体的上方加一个 ...
- Lombok(1.14.8) - @Cleanup
@Cleanup @Cleanup,关闭流.如果最后清理资源的方法不是 close(),可以指定,例如 @Cleanup("clean"). package com.huey.lo ...
- HTTP - 条件请求
当 HTTP 请求包含 If-XXX 这种样式的首部时,服务器会对附带的条件进行判断,只有判断指定条件为真,才会执行请求.这样的请求首部有五个,分别是 If-Modified-Since.If-Unm ...
- 每天一道LeetCode--342. Power of Four
Given an integer (signed 32 bits), write a function to check whether it is a power of 4. Example:Giv ...
- 最新app源码下载:200款优秀Android项目源码
200款优秀Android项目源码!菜鸟必备!Android开发又将带来新一轮热潮,很多开发者都投入到这个浪潮中去了,创造了许许多多相当优秀的应用.其中也有许许多多的开发者提供了应用开源项目,贡献出他 ...
- eclipse注册码生成,在eclipse3.3.x上测试可用
这段时间刚加入一个新的项目组,项目组使用的Flex框架. 开发工具由项目组统一提供,使用的是Eclipse 3.3.0,里面包含了其他开发人员集成上去的许多插件,个人感觉比较实用.但是这个版本Ecli ...