ECharts图表引用json数据
来讲两个图表,一个折线图,一个饼图。
先来看看效果图:
现在来看看代码,先来折线图,后台:
(这里的后台太麻烦了,写的太多。可以使用Linq的方式,Linq比较简单写的也少。参考我的这篇文章的2018.7.2号的更新)
- public ActionResult GetCourse()
- {
- string [] Name=new string [];
- int[] Count=new int[];
- string sql = "select top 3 a.ClassName,b.SelectCount from Course a inner join (select ClassNumber,COUNT(*) SelectCount from SelectCourse group by ClassNumber) b on a.ClassNumber=b.ClassNumber order by SelectCount desc";
- SqlHelper sqlHelper = new SqlHelper();
- DataTable dataTable = sqlHelper.SqlConnectionInformation(sql);
- for (int i = ; i < dataTable.Rows.Count; i++)
- {
- Name[i] = dataTable.Rows[i]["ClassName"].ToString();
- Count[i] = int.Parse(dataTable.Rows[i]["SelectCount"].ToString());
- }
- var EName = JsonConvert.SerializeObject(Name);
- var ECount = JsonConvert.SerializeObject(Count);
- string json = $"{{\"name\":{EName},\"count\":{ECount}}}";
- return Json(json);
- }
然后前台:引用文件自己去写
- <div id="main" style="width: 600px;height: 400px;float:left" ></div>
- <script type="text/javascript">
- var json;
- $.ajax({
- type: "post",
- url: "/CourseCount/GetCourse",
- dataType: 'JSON',
- success: function (data) {
- json = JSON.parse(data);
- myChart.setOption({
- title: {
- text: '热门课程前三甲'
- },
- tooltip: {},
- legend: {
- data: ['选课人数']
- },
- xAxis: {
- data: json.name
- },
- yAxis: {},
- series: [{
- name: '选课人数',
- type: 'line',
- data: json.count
- }]
- });
- }
- });
- //将echart初始化到div中
- var myChart = echarts.init(document.getElementById('main'));
- //指定图表的配置项和数据
- <scripts>
现在是饼图,后台:
- public ActionResult GetBing()
- {
- string[] Name = new string[];
- int[] Count = new int[];
- string sql = "select top 5 a.ClassName,b.SelectCount from Course a inner join (select ClassNumber,COUNT(*) SelectCount from SelectCourse group by ClassNumber) b on a.ClassNumber=b.ClassNumber order by SelectCount desc";
- SqlHelper sqlHelper = new SqlHelper();
- DataTable dataTable = sqlHelper.SqlConnectionInformation(sql);
- for (int i = ; i < dataTable.Rows.Count; i++)
- {
- Name[i] = dataTable.Rows[i]["ClassName"].ToString();
- Count[i] = int.Parse(dataTable.Rows[i]["SelectCount"].ToString());
- }
- var EName = JsonConvert.SerializeObject(Name);
- var ECount = JsonConvert.SerializeObject(Count);
- string json = $"{{\"value\":{ECount},\"name\":{EName}}}";
- return Json(json);
- }
前端:
- <div id="bing" style="width: 600px;height: 400px;float:left"></div>
- <scripts>
- var jsonbing;
- var bing = echarts.init(document.getElementById('bing'));
- var brower = [];
- var listname=[];
- var listvalue=[] ;
- $.ajax({
- type: "post",
- url: "/CourseCount/GetBing",
- dataType: 'JSON',
- success: function (data) {
- jsonbing = JSON.parse(data);
- listname = jsonbing.name;
- listvalue = jsonbing.value;
- for (i = ; i < ; i++) {
- brower.push({
- value: listvalue[i],
- name: listname[i]
- });
- }
- bing.setOption({
- title: {
- text: '热门课程前五甲',
- subtext: '热度比例',
- left: 'center'
- },
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br />{b} : {c} ({d}%)"
- },
- legend: {
- // orient: 'vertical',
- // top: 'middle',
- bottom: ,
- left: 'center',
- data: listname
- },
- series: [
- {
- type: 'pie',
- radius: '65%',
- center: ['50%', '50%'],
- selectedMode: 'single',
- data: brower,
- itemStyle: {
- emphasis: {
- shadowBlur: ,
- shadowOffsetX: ,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- }
- ]
- });
- }
- });
- <scripts>
ECharts图表引用json数据的更多相关文章
- ECharts图表中级入门之formatter:夜谈关于ECharts图表内的数据格式化方法
来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...
- ECharts SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中
本文引用自:http://blog.csdn.net/ArcticFoxHan/article/details/38071641 1.导入包,搭建SSH框架 导入Jquery的JS包,<sc ...
- ECharts SSH+JQueryAjax+Json+JSP在数据库中的数据来填充ECharts在
1导入包.设定SSH框架. 进口JQuery的JS包.<script src="JS/jquery-1.7.1.js"></script> 导入EChart ...
- ECharts 环形饼图 动态获取json数据
ECharts 环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...
- ECharts动态获取后台传过来的json数据进行多个折线图的显示,折线的数据由后台传过来
ECharts 多个折线图动态获取json数据 效果图如下: 一.html部分 <p id="TwoLineChart" style="width:100%; he ...
- Echarts怎么用后台传来的json数据
Echarts怎么用后台传来的json数据 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- 【JSON 注解】JSON循环引用2----JSON注解@JsonIgnoreProperties+JAVA关键字transient+后台对象与JSON数据的格式互相转化
接着来说这个JSON循环引用的问题: 关于JSON格式的转化,其实关键就是这几个依赖: <!-- json --> <!-- 1号 --> <dependency> ...
- 基于HTML5的WebGL实现json和echarts图表展现在同一个界面
突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...
- echarts动态加载数据无法更新series 无法更新图表
最近遇到一个Echarts图表无法动态更新数据的问题 最初我在option中设置series的值为一个数组,想着通过修改数组来动态更新图表,但是没变 化,后来发觉是因为图表数据会和之前的合并 看官方的 ...
随机推荐
- 四则运算安卓版ver.mk3
在原有的基础上做了些许改动以及添加了一点小功能,以下是代码: package com.example.add; import java.io.File; import com.example.add. ...
- 分布式版本控制系统Git的安装与使用 第二次作业
(本次作业要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2103) 一.安装Git bash软件和安装notepad++ 二 ...
- 每天学习SQL
SELECT table_name FROM information_schema.tables WHERE table_schema='survey170227_main' AND table_na ...
- shell脚本--文件查找之find命令
首先是通过文件名称来查找,需要使用一个-name参数. 查询以 .txt结尾的文件,和以 t 开头的文件: ubuntu@ubuntu:~/test$ ls one.txt three.txt tw ...
- Raphaël - JavaScript Vector Library
Raphaël http://dmitrybaranovskiy.github.io/raphael/ // ┌──────────────────────────────────────────── ...
- ExtJS Tab里放Grid高度自适应问题,官方Perfect方案。
出处:http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/layout-browser/layouts/combination.js // ...
- OA与BPM的区别
BPM OA 软件架构 JAVA..NET.基于SOA架构 JAVA..NET.PHP.Domino 驱动模式 流程驱动 文档驱动 交互 人与人,人与系统,系统与系统 人与人 软件功能 ...
- python之FTP上传和下载
# FTP操作 import ftplib host = '192.168.20.191' username = 'ftpuser' password = 'ftp123' file = '1.txt ...
- BZOJ3597 SCOI2014方伯伯运椰子(分数规划+spfa)
即在总流量不变的情况下调整每条边的流量.显然先二分答案变为求最小费用.容易想到直接流量清空跑费用流,但复杂度略有些高. 首先需要知道(不知道也行?)一种平时基本不用的求最小费用流的算法——消圈法.算法 ...
- JavaScript--XML DOM 总结
XML DOM 2018-09-04 XML简介 1.什么是XML XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML XML ...