Echarts 学习系列(3)-Echarts动态数据交互
写在前面
上一小节，我们总结了折线(面积)图、柱状(条形)图、饼（圆环）图类型的图表。
但是，都是静态的。接下来的，这一小节，总结的是Echarts 动态数据的交换。
前置条件
开发环境：win10 家庭版
开发工具：Visual Studio 2019
数据库：MySQL
数据连接工具：Navicat Premium
使用技术：.Net Mvc+Dapper
创建数据库
//创建 sys_visitoronhour
DROP TABLE IF EXISTS `sys_visitoronhour`;
CREATE TABLE `sys_visitoronhour` (
`Id` int(11) NOT NULL AUTO_INCREMENT,
`Houer_name` int(11) DEFAULT NULL COMMENT '小时',
`Hour_time` int(11) DEFAULT NULL COMMENT '次数',
PRIMARY KEY (`Id`)
) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT CHARSET=utf8;
//插入数据
INSERT INTO `sys_visitoronhour` VALUES ('1', '1', '111');
INSERT INTO `sys_visitoronhour` VALUES ('2', '2', '223');
INSERT INTO `sys_visitoronhour` VALUES ('3', '3', '456');
INSERT INTO `sys_visitoronhour` VALUES ('4', '4', '432');
INSERT INTO `sys_visitoronhour` VALUES ('5', '5', '412');
INSERT INTO `sys_visitoronhour` VALUES ('6', '6', '321');
INSERT INTO `sys_visitoronhour` VALUES ('7', '7', '342');
INSERT INTO `sys_visitoronhour` VALUES ('8', '8', '341');
INSERT INTO `sys_visitoronhour` VALUES ('9', '9', '324');
INSERT INTO `sys_visitoronhour` VALUES ('10', '10', '456');
INSERT INTO `sys_visitoronhour` VALUES ('11', '11', '654');
INSERT INTO `sys_visitoronhour` VALUES ('12', '12', '546');
INSERT INTO `sys_visitoronhour` VALUES ('13', '13', '654');
INSERT INTO `sys_visitoronhour` VALUES ('14', '14', '765');
INSERT INTO `sys_visitoronhour` VALUES ('15', '15', '657');
INSERT INTO `sys_visitoronhour` VALUES ('16', '16', '667');
INSERT INTO `sys_visitoronhour` VALUES ('17', '17', '789');
INSERT INTO `sys_visitoronhour` VALUES ('18', '18', '987');
INSERT INTO `sys_visitoronhour` VALUES ('19', '19', '897');
INSERT INTO `sys_visitoronhour` VALUES ('20', '20', '888');
INSERT INTO `sys_visitoronhour` VALUES ('21', '21', '988');
INSERT INTO `sys_visitoronhour` VALUES ('22', '22', '768');
INSERT INTO `sys_visitoronhour` VALUES ('23', '23', '399');
//创建 sys_visitoronprovince
DROP TABLE IF EXISTS `sys_visitoronprovince`;
CREATE TABLE `sys_visitoronprovince` (
`Id` int(36) NOT NULL AUTO_INCREMENT COMMENT 'Id自增',
`Visitors_Province_Name` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '省份',
`Visitors_Time` int(11) DEFAULT NULL COMMENT '访问次数',
PRIMARY KEY (`Id`)
) ENGINE=InnoDB AUTO_INCREMENT=51 DEFAULT CHARSET=utf8;
//插入数据
INSERT INTO `sys_visitoronprovince` VALUES ('1', '北京', '223');
INSERT INTO `sys_visitoronprovince` VALUES ('5', '天津', '332');
INSERT INTO `sys_visitoronprovince` VALUES ('7', '上海', '442');
INSERT INTO `sys_visitoronprovince` VALUES ('11', '重庆', '442');
INSERT INTO `sys_visitoronprovince` VALUES ('14', '内蒙古自治区', '552');
INSERT INTO `sys_visitoronprovince` VALUES ('17', '新疆维吾尔自治区', '664');
INSERT INTO `sys_visitoronprovince` VALUES ('20', '西藏自治区', '223');
INSERT INTO `sys_visitoronprovince` VALUES ('24', '宁夏回族自治区', '556');
INSERT INTO `sys_visitoronprovince` VALUES ('26', '广西壮族自治区', '321');
INSERT INTO `sys_visitoronprovince` VALUES ('28', '黑龙江省', '432');
INSERT INTO `sys_visitoronprovince` VALUES ('29', '吉林省', '456');
INSERT INTO `sys_visitoronprovince` VALUES ('30', '辽宁省', '432');
INSERT INTO `sys_visitoronprovince` VALUES ('31', '河北省', '345');
INSERT INTO `sys_visitoronprovince` VALUES ('32', '山西省', '121');
INSERT INTO `sys_visitoronprovince` VALUES ('33', '青海省', '232');
INSERT INTO `sys_visitoronprovince` VALUES ('34', '山东省', '421');
INSERT INTO `sys_visitoronprovince` VALUES ('35', '河南省', '512');
INSERT INTO `sys_visitoronprovince` VALUES ('36', '江苏省', '123');
INSERT INTO `sys_visitoronprovince` VALUES ('37', '安徽省', '425');
INSERT INTO `sys_visitoronprovince` VALUES ('38', '浙江省', '321');
INSERT INTO `sys_visitoronprovince` VALUES ('39', '福建省', '232');
INSERT INTO `sys_visitoronprovince` VALUES ('40', '江西省', '211');
INSERT INTO `sys_visitoronprovince` VALUES ('41', '湖南省', '344');
INSERT INTO `sys_visitoronprovince` VALUES ('42', '湖北省', '151');
INSERT INTO `sys_visitoronprovince` VALUES ('43', '广东省', '242');
INSERT INTO `sys_visitoronprovince` VALUES ('44', '台湾省', '125');
INSERT INTO `sys_visitoronprovince` VALUES ('45', '海南省', '111');
INSERT INTO `sys_visitoronprovince` VALUES ('46', '甘肃省', '222');
INSERT INTO `sys_visitoronprovince` VALUES ('47', '陕西省', '333');
INSERT INTO `sys_visitoronprovince` VALUES ('48', '四川省', '444');
INSERT INTO `sys_visitoronprovince` VALUES ('49', '贵州省', '555');
INSERT INTO `sys_visitoronprovince` VALUES ('50', '云南省', '666');
创建项目
【1】.打开Visual Studio 2019 创建空的Mvc 项目
【2】.打开web.config 在节点下去除 BrowserLink
<add key="vs:EnableBrowserLink" value="false" />
【3】.在下 创建链接字符串
<connectionStrings>
<add name="mq" connectionString="server=localhost;uid=root;pwd=root;Database=mysqldemodb;Charset=utf8;Allow User Variables=True;"/>
</connectionStrings>
【4】.在项目中 创建lib文件夹 存放下载好的Echarts和其他的插件
【5】.在View文件夹中 创建Share文件夹
【6】.在Share文件夹中 创建_LayoutIndex布局页 引用Echarts、主题和其他插件脚本、样式
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<link href="~/lib/layer/theme/default/layer.css" rel="stylesheet" />
<script src="~/lib/jquery/jquery-1.12.4.min.js"></script>
<script src="~/lib/layer/layer.js"></script>
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/echarts/echarts.min.js"></script>
<script src="~/lib/echarts/walden.js"></script>
<style>
.layout {
margin: 20px;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 70px;
border: 1px solid #ddd;
border-radius: 10px;
}
</style>
</head>
<body>
@RenderBody()
</body>
</html>
【7】.在Controllers文件夹 创建IndexController 控制器
【8】.在IndexController控制器 创建Index视图 引用_LayoutIndex布局页
安装程序包
【1】安装 MySQL.Data 安装命令
PM> Install-Package MySql.Data
【2】安装 Dapper 安装命令
Install-Package Dapper
柱状图
【1】在Index视图中
@{
ViewBag.Title = "Index";
Layout = "~/Views/Share/_LayoutIndex.cshtml";
}
<div class="layui-fluid">
<div class="layout">
<fieldset class="layui-elem-field layui-field-title"><legend>动态图表</legend></fieldset>
<div class="layui-row">
<div class="layui-col-md12">
<div id="main" style="width: 100%;height:400px;"></div>
</div>
</div>
</div>
</div>
【2】脚本
var myChart1 = echarts.init(document.getElementById('main'), 'walden');
myChart1.setOption({
tooltip: { trigger: 'axis' },
legend: { data: ['访问量'] },
calculable: true,
xAxis: [
{
type: 'category',
data: [],
axisLabel: {
show: true,
textStyle: { color: '#000' },
rotate: 25,
interval: 0,
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '访问量',
type: 'bar',
data: [],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
},
]
});
Get_load();
//text: 文本内容
//maskColor: 背景色
//textColor:文本颜色
myChart1.showLoading('default', { text: '统计中，请稍候...', maskColor: '#404a59', textColor: '#fff', });
function Get_load() {
var xvalue = [];
var yvalue = [];
$.ajax({
url: "../Index/Area_Times",
type: "Get",
async: false,
}).done(function (msg) {
if ($.isEmptyObject(msg) == false) {
$.each(msg, function (i, obj) {
xvalue.push(obj.Visitors_Province_Name);
yvalue.push(obj.Visitors_Time);
});
myChart1.setOption({
xAxis: [{ data: xvalue }],
series: [{ data: yvalue }]
});
setTimeout(function () { myChart1.hideLoading(); }, 1000);
}
}).fail(function (error) { });
}
【3】在IndexController 控制器中
#region 地区访问次数
public JsonResult Area_Times() {
using (var mqconns = new MySqlConnection(mqcon)) {
string sql = "select * from v_Visitor_Area";
var result = mqconns.Query<sys_visitorOnProvince>(sql);
return Json(result,JsonRequestBehavior.AllowGet);
}
}
#endregion
效果：
图表的详细
有时候我们需要通过点击图表的某一列，想查询选择的这一列的详细数据。
以下，我们来讲一下，如何可以通过选中某一列跳转到对应的数据。
我们就以柱状图为列子~
【1】首先，我们需要在IndexController控制器中 创建Detial方法 获取前台传过来的值
public ActionResult Detial(string Id) {
ViewBag.Id = Id;
return View();
}
【2】其次，我们需要在IndexController控制器中 创建AreaByname_Times方法 用于接收值
public JsonResult AreaByname_Times() {
using (var mqconns = new MySqlConnection(mqcon)) {
string paraname = Request["paraname"];
string sql = "select * from sys_visitoronprovince where 1=1";
if (paraname == "华东地区")
{
sql += " and (Visitors_Province_Name LIKE '%山东%' OR ";
sql += " Visitors_Province_Name LIKE '%江苏%' OR";
sql += " Visitors_Province_Name LIKE '%上海%' OR";
sql += " Visitors_Province_Name LIKE '%浙江%' OR";
sql += " Visitors_Province_Name LIKE '%安徽%' OR";
sql += " Visitors_Province_Name LIKE '%福建%' OR";
sql += " Visitors_Province_Name LIKE '%江西%')";
}
else if (paraname == "华南地区") {
sql += " and (Visitors_Province_Name LIKE '%广东%' OR";
sql += " Visitors_Province_Name LIKE '%广西%' OR";
sql += " Visitors_Province_Name LIKE '%海南%')";
}
else if (paraname == "华中地区")
{
sql += " and (Visitors_Province_Name LIKE '%河南%' OR";
sql += " Visitors_Province_Name LIKE '%湖南%' OR";
sql += " Visitors_Province_Name LIKE '%湖北%')";
}
else if (paraname == "华北地区")
{
sql += " and (Visitors_Province_Name LIKE '%北京%' OR";
sql += " Visitors_Province_Name LIKE '%天津%' OR";
sql += " Visitors_Province_Name LIKE '%河北%' OR";
sql += " Visitors_Province_Name LIKE '%山西%' OR ";
sql += " Visitors_Province_Name LIKE '%内蒙古%')";
}
else if (paraname == "西北地区")
{
sql += " and (Visitors_Province_Name LIKE '%宁夏%' OR";
sql += " Visitors_Province_Name LIKE '%青海%' OR";
sql += " Visitors_Province_Name LIKE '%陕西%' OR";
sql += " Visitors_Province_Name LIKE '%甘肃%' OR ";
sql += " Visitors_Province_Name LIKE '%新疆%')";
}
else if (paraname == "西南地区")
{
sql += " and (Visitors_Province_Name LIKE '%四川%' OR";
sql += " Visitors_Province_Name LIKE '%贵州%' OR";
sql += " Visitors_Province_Name LIKE '%云南%' OR";
sql += " Visitors_Province_Name LIKE '%重庆%' OR ";
sql += " Visitors_Province_Name LIKE '%西藏%')";
}
else if (paraname == "东北地区")
{
sql += " and (Visitors_Province_Name LIKE '%辽宁%' OR";
sql += " Visitors_Province_Name LIKE '%吉林%' OR";
sql += " Visitors_Province_Name LIKE '%黑龙江%')";
}
var result = mqconns.Query<sys_visitorOnProvince>(sql);
return Json(result,JsonRequestBehavior.AllowGet);
}
}
【3】在Detail 视图
@{
ViewBag.Title = "Detial";
Layout = "~/Views/Share/_LayoutIndex.cshtml";
}
<div class="layui-fluid">
<div class="layout">
<table class="layui-table " lay-skin="line" id="tb">
<thead>
<tr>
<th>序号</th>
<th>地区名称</th>
<th>访问次数</th>
</tr>
</thead>
</table>
</div>
</div>
【4】创建脚本
<script type="text/javascript">
$(function () {
var id = '@ViewBag.id';
$.get("../Index/AreaByname_Times?paraname=" + id, function (msg) {
if ($.isEmptyObject(msg) == false) {
var str_tb = "";
$("#tb tr:gt(0)").remove();
$.each(msg, function (i, obj) {
str_tb += "<tr>";
str_tb += "<td>" + (i + 1) + "</td>";
str_tb += "<td>" + obj.Visitors_Province_Name + "</td>";
str_tb += "<td>" + obj.Visitors_Time + "</td>";
str_tb += "</tr>";
});
$(str_tb).appendTo("#tb");
}
});
});
</script>
效果：
曲线图
【1】在Index 视图中
@{
ViewBag.Title = "Index";
Layout = "~/Views/Share/_LayoutIndex.cshtml";
}
<div class="layui-fluid">
<div class="layout">
<fieldset class="layui-elem-field layui-field-title"><legend>动态图表</legend></fieldset>
<div class="layui-row">
<div class="layui-col-md12">
<div id="main1" style="width: 100%;height:400px;"></div>
</div>
</div>
</div>
</div>
【2】脚本
var myChart = echarts.init(document.getElementById('main'), 'walden');
myChart.setOption({
tooltip: { trigger: 'axis' },
legend: { data: ['每天访问量'] },
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: []
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '每天访问量',
type: 'line',
stack: '访问次数',
data: []
},
]
});
Get_load();
//text: 文本内容
//maskColor: 背景色
//textColor:文本颜色
myChart.showLoading('default', { text: '统计中，请稍候...', maskColor: '#404a59', textColor: '#fff', });
function Get_load() {
var xvalue = [];
var yvalue = [];
$.ajax({
url: "../Index/SingleBar",
type: "Get",
async: false,
}).done(function (msg) {
if ($.isEmptyObject(msg) == false) {
$.each(msg, function (i, obj) {
xvalue.push(obj.Houer_name);
yvalue.push(obj.Hour_time);
});
myChart.setOption({
xAxis: [{ data: xvalue }],
series: [{ data: yvalue }]
});
setTimeout(function () { myChart.hideLoading(); }, 1000);
}
}).fail(function (error) { });
}
}
【3】在IndexController控制器中
#region 获取24小时访问次数
/// <summary>
/// 获取24小时访问次数
/// </summary>
/// <returns></returns>
public JsonResult SingleBar()
{
using (var mqconns = new MySqlConnection(mqcon))
{
string sql = "select * from sys_visitorOnHour ";
var result = mqconns.Query<sys_visitorOnHour>(sql);
return Json(result, JsonRequestBehavior.AllowGet);
}
}
#endregion
效果图：
饼图
【1】在Index 视图中
@{
ViewBag.Title = "Index";
Layout = "~/Views/Share/_LayoutIndex.cshtml";
}
<div class="layui-fluid">
<div class="layout">
<fieldset class="layui-elem-field layui-field-title"><legend>动态图表</legend></fieldset>
<div class="layui-row">
<div class="layui-col-md12">
<div id="main1" style="width: 100%;height:400px;"></div>
</div>
</div>
</div>
</div>
【2】脚本
var myChart2 = echarts.init(document.getElementById('main2'), 'walden');
myChart2.setOption({
title: {
text: '民族自治区访问量',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: []
},
calculable: true,
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: []
}
]
});
Get_load();
//text: 文本内容
//maskColor: 背景色
//textColor:文本颜色
myChart1.showLoading('default', { text: '统计中，请稍候...', maskColor: '#404a59', textColor: '#fff', });
function Get_load() {
var xvalue = [];
var yvalue = [];
$.ajax({
url: "../Index/Native_Times",
type: "Get",
async: false,
}).done(function (msg) {
if ($.isEmptyObject(msg) == false) {
$.each(msg, function (i, obj) {
xvalue.push(obj.Visitors_Province_Name);
yvalue.push({ value: obj.Visitors_Time, name: '' + obj.Visitors_Province_Name + '' });
});
myChart2.setOption({
legend: { data: xvalue },
series: [{ data: yvalue }]
});
setTimeout(function () { myChart2.hideLoading(); }, 1000);
}
}).fail(function (error) { });
}
【3】在IndexController控制器中
#region 自治区访问量
public JsonResult Native_Times() {
using (var mqconns =new MySqlConnection(mqcon)) {
string sql = "select * from sys_visitoronprovince ";
sql += "where (Visitors_Province_Name='内蒙古自治区' ";
sql += "or Visitors_Province_Name='广西壮族自治区'";
sql += "or Visitors_Province_Name='宁夏回族自治区'";
sql += "or Visitors_Province_Name='新疆维吾尔自治区' ";
sql += "or Visitors_Province_Name='西藏自治区') ORDER BY Visitors_Time desc";
var result = mqconns.Query<sys_visitorOnProvince>(sql);
return Json(result,JsonRequestBehavior.AllowGet);
}
}
#endregion
效果：
Echarts 学习系列(3)-Echarts动态数据交互的更多相关文章
- 【ECharts】报表联动，动态数据设计
说明: 数据没有拉取后台数据,仅仅前端模拟数据,Copy即可有效果.联动后台时,使用异步获取数据即可.鼠标点击,动态展示点击项的数据.有关更多实例,请移步到echarts官网查看. 成果展示: 相关代 ...
- Echarts 学习系列(2)-常见的静态ECharts图
目录 写在前面 折线(面积)图 1.折线图 2.堆叠折线图 3.堆积面积图 柱状(条形)图 1.柱状图 2.条形图 3.堆积条形图 饼(圆环)图 1.饼图 2.环形图 3.南丁格尔图 写在前面 上一小 ...
- Echarts 学习系列(1)-5分钟上手ECharts
目录 写在前面 下载Echarts和主题 绘制一个简单的图表 写在前面 最近,在做某个项目的时候.需要使用的可视化的图表显数据.最后,选择了百度的Echarts. 下载Echarts和主题 1.获取E ...
- ECharts学习总结(四):echarts的实例方法
echarts的实例方法非常重要,因为在实际运用中我们额图表的数据不可能是死的,而是动态变化的,实例方法为动态改变数据提供了方法.故特意从官网上面把下面实例方法进行记录: 注:下面内容摘自echart ...
- ECharts学习总结(一):ECharts的第一个图表
在进行echarts图表开发之前先要到echarts官网下载echarts的库文件,我下载的是echarts-2.2.7.然后把库文件放到工程文件web目录下.接下来进行第一个图表的显示步骤如下: 1 ...
- AntDesign(React)学习-10 Dva 与后台数据交互
明天正式在线办公没时间学习了,今天晚上再更新一篇, 代码提交一次:https://github.com/zhaogaojian/jgdemo 1.src下创建services目录 创建文件userSr ...
- ECharts学习总结(五):echarts的Option概览
注:下面内容摘自echarts官网,原文地址:http://echarts.baidu.com/doc/doc.html#%E9%80%89%E9%A1%B9 option 图表选项,包含图表实例任何 ...
- ECharts概念学习系列之ECharts的下载和安装（图文详解）
不多说,直接上干货! http://echarts.baidu.com/download.html 前言 如果你想要用较少的代码实现比较酷炫的数据统计表,echarts是值得你考虑的一种实现方式.官网 ...
- ECharts概念学习系列之ECharts是什么？
不多说,直接上干货! http://echarts.baidu.com/index.html http://echarts.baidu.com/echarts2/index.html 开源的EChar ...
随机推荐
- javascript之DOM选择符
javascript库中最常用的一项功能,就是根据CSS选择符选择与某个模式匹配的DOM元素.实际上jQuery的核心就是通过css选择符查询DOM文档取得元素的引用,从而抛开了getElementB ...
- Python实现感知器的逻辑电路（与门、与非门、或门、异或门）
在神经网络入门回顾(感知器.多层感知器)中整理了关于感知器和多层感知器的理论,这里实现关于与门.与非门.或门.异或门的代码,以便对感知器有更好的感觉. 此外,我们使用 pytest 框架进行测试. p ...
- 良心送分题(牛客挑战赛35E+虚树+最短路)
目录 题目链接 题意 思路 代码 题目链接 传送门 题意 给你一棵树,然后把这棵树复制\(k\)次,然后再添加\(m\)条边,然后给你起点和终点,问你起点到终点的最短路. 思路 由于将树复制\(k\) ...
- log4j配置每天生成一个日志文件
首先需要配置web.xml里面: <servlet-name>log4j-init</servlet-name> <servlet-class>com.free.c ...
- css 高度随宽度比例变化
[方案一:padding实现] 原理: 一个元素的 padding,如果值是一个百分比,那这个百分比是相对于其父元素的宽度而言的,padding-bottom 也是如此. 使用 padding-bot ...
- wordpress如何添加自增变量(第一篇文章显示摘要后面的只显示标题)
有时我们在调用文章列表的时候需要在前面添加序号看起来比较整齐,如何实现呢?要想精确的控制每篇文章,我们先在循环前定义一个变量 $ashu_i=1 来计数,变量名随便,然后每循环一次,$ashu_i加1 ...
- angular 小技术点
angular 标签 ng-options ng-model ng-checked ng-true-value ng-false-value ng-if ng-src delete $location ...
- git bisect
reference : http://www.ruanyifeng.com/blog/2018/12/git-bisect.html git bisect 命令教程 作者: [12]阮一峰 日期: [ ...
- 【JZOJ5740】【20190706】幻想世界
题目 小 $\omega $ 想要进行烟火表演,她一开始有\(n\)颗彗星和\(n\)颗陨石 如果小 \(\omega\) 有\(i\)颗彗星而没有陨石,那么她会消耗\(i\)颗彗星并得到\(a_i\ ...
- 记忆的轮廓 期望 四边形不等式dp|题解
记忆的轮廓 题目描述 通往贤者之塔的路上,有许多的危机.我们可以把这个地形看做是一颗树,根节点编号为1,目标节点编号为n,其中1-n的简单路径上,编号依次递增,在[1,n]中,一共有n个节点.我们把编 ...