首页 > 其他分享 >ECHART的使用方法

ECHART的使用方法

时间:2022-09-05 00:01:25浏览次数:86  
标签:set ECHART get series List 使用 new 方法 public

项目中需要使用图表,最初使用的.NET自带的MSChart控件,做出来的效果不太好,所以又使用了Echarts控件。

MSChart源码放在最后,可自行下载查看。

Echarts是一个基于 JavaScript 的开源可视化图表库,在此是在.NET MVC中的使用,其他项目也应该是如出一辙。

Echarts官网:http://echarts.apache.org

Echarts下载:https://echarts.apache.org/zh/download.html

 

使用说明:

  1、引入ECharts

    <script src="~/Content/echarts/echarts.min.js"></script>

   2、为ECharts准备一个具备大小(宽高)的Dom

     <div id="chart_rentalreturn" style="width: 700px;height:300px;"></div>

   3、创建关于图表属性的对象

复制代码
 1 public class normal
 2     {
 3         /// <summary>
 4         /// color
 5         /// </summary>
 6         public string color
 7         {
 8             get;
 9             set;
10 
11         }
12 
13     }
14     public class itemStyle
15     {
16         /// <summary>
17         /// normal
18         /// </summary>
19         public object normal
20         {
21             get;
22             set;
23         }
24     }
25     public class data
26     {
27         public string name
28         {
29             get;
30             set;
31         }
32         public int value
33         {
34             get;
35             set;
36         }
37         public object itemStyle
38         {
39             get;
40             set;
41         }
42     }
43 
44     public class Series
45     {
46         /// <summary>
47         /// sereis序列组id
48         /// </summary>
49         public int id
50         {
51             get;
52             set;
53         }
54         /// <summary>
55         /// series序列组名称
56         /// </summary>
57         public string name
58         {
59             get;
60             set;
61         }
62         /// <summary>
63         /// series序列组图表类型
64         /// </summary>
65         public string type
66         {
67             get;
68             set;
69         }
70         /// <summary>
71         /// series序列组itemstyle
72         /// </summary>
73         public object itemStyle
74         {
75             get;
76             set;
77         }
78         /// <summary>
79         /// series序列组的数据数组
80         /// </summary>
81         public List<object> data
82         {
83             get;
84             set;
85         }
86     }
复制代码

   4、控制器中创建方法

复制代码
 1 public JsonResult GetEchartsRentalReturn()
 2         {
 3             //图表的category数组
 4             List<string> categoryList = new List<string>();
 5             //图表的series数组
 6             List<Series> seriesList = new List<Series>();
 7             //设置legend内的data数组为series的name集合
 8             List<string> legendList = new List<string>();
 9             legendList.Add("Rental"); //这里的名称必须和series的每一组series的name保持一致
10             legendList.Add("Return");
11 
12             Series rentalSeries = new Series();
13             rentalSeries.id = 0;
14             rentalSeries.name = "Rental";
15             rentalSeries.type = "line"; //线性图
16             rentalSeries.data = new List<object>();
17             rentalSeries.itemStyle = new itemStyle { normal = new normal { color = "#0099FF" } };
18 
19             Series returnSeries = new Series();
20             returnSeries.id = 1;
21             returnSeries.name = "Return";
22             returnSeries.type = "line"; 
23             returnSeries.data = new List<object>();
24             returnSeries.itemStyle = new itemStyle { normal = new normal { color = "#00CC00" } };
25             Random rd = new Random();
26             for (int i = 6; i <= 23; i++)
27             {
28                 categoryList.Add(i.ToString());
29                 rentalSeries.data.Add(rd.Next(0, 801));
30                 returnSeries.data.Add(rd.Next(0, 801));
31             }
32 
33             //将sereis对象加入sereis数组列表内
34             seriesList.Add(rentalSeries);
35             seriesList.Add(returnSeries);
36             var newObj = new
37             {
38                 category = categoryList,
39                 series = seriesList,
40                 legend = legendList
41             };
42 
43             return Json(newObj, JsonRequestBehavior.AllowGet);
44         }  
复制代码

   5、创建图表

复制代码
 1     <script type="text/javascript">
 2         $(document).ready(function () {
 3             func_echarts_pie_rentalreturn();
 4         });
 5 
 6         function func_echarts_pie_rentalreturn() {
 7             // 基于准备好的dom,初始化echarts实例
 8             var myChart = echarts.init(document.getElementById('chart_rentalreturn'));
 9 
10             // 指定图表的配置项和数据
11             var option = {
12                 title: {
13                     text: '(X:Min   Y:Times)',
14                     bottom: '92%'
15                 },
16                 tooltip: {
17                     trigger: 'axis'
18                 },
19                 legend: {
20                     data: ['Rental', 'Return'],
21                     bottom: '87%'
22                 },
23                 grid: {
24                     left: '3%',
25                     right: '4%',
26                     bottom: '3%',
27                     containLabel: true
28                 },
29                 toolbox: {
30                     feature: {
31                         saveAsImage: {}
32                     }
33                 },
34                 xAxis: {
35                     type: 'category',
36                     boundaryGap: false
37                 },
38                 yAxis: {
39                     type: 'value'
40                 },
41                 series: []
42             };
43 
44             $.ajax({
45                 type: "post",
46                 url: "/Home/GetEchartsRentalReturn",
47                 data:
48                 {
49                     async: false,
50                     operate: "myChart"
51                 },
52                 dataType: "json",        //返回数据形式为json
53                 success: function (result) {
54                     for (var i = 0; i < result.length; i++) {
55                         result[i].name;
56                     }
57                     option.xAxis.data = result.category;
58                     option.series = result.series;
59                     option.legend.data = result.legend;
60                     myChart.setOption(option);
61                 },
62                 error: function (errorMsg) {
63                     //请求失败时执行该函数
64                     alert("图表请求数据失败!");
65                 }
66             });
67         }
68     </script>
复制代码

   6、图表效果显示

 

 

 

结语:使用ECharts之后,觉得功能很强大,可以满足任何图表的需求,需要的功能都可以在官网的示例中找到。这里只写了一个简单的使用,其余的可根据官网示例自行摸索。

MSChart源码下载:

  链接:https://pan.baidu.com/s/1RF0mYfssp6cmRAEJV2Bv8g
  提取码:lju8

 

标签:set,ECHART,get,series,List,使用,new,方法,public
From: https://www.cnblogs.com/qiu18359243869/p/16656567.html

相关文章

  • python篇-魔术方法
    '''__getattribute__触发时机:访问对象成员的时候就会触发,无论成员是否存在作用:可以在舒勇获取数据的时候进行数据处理等操作参数:一个self接受当前对象,另一个参数接受访......
  • alibaba的csb使用HttpParameters.Builder 发送请求时通过NGINX时,一些参数消失
    问题描述当使用csb的HttpParameters.Builder的requestURL方法调用第三方api时,本地运行成功调用,但是当部署在服务器A并通过另一台服务器B的ng转发调用失败。代码......
  • zabbix的基本使用
    目录zabbix服务端web界面介绍(Monitoring)监控选项栏设置(Services)服务选项栏(lnventory)清单选项栏(Reports)报告选项栏(Configuration)配置选项栏(Administration)管理选项卡zabbix......
  • zabbix的基础使用
    zabbix的基础使用目录zabbix的基础使用zabbix服务端web界面使用介绍web界面(Monitoring)监控选项栏设置(Services)服务选项栏(lnventory)清单选项栏(Reports)报告选项栏(......
  • SpringCloud 使用 Hystrix 实现【客户端】降级
    前面已经介绍了Hystrix服务端降级的实现方案,本篇博客将介绍Hystrix在客户端降级的实现方案。由于我使用最新版的SpringCloud(版本2021.0.3)实现客户端降级没有成功,所......
  • gcc-arm-none-eabi工具链工具使用方法及介绍
    为了方便自己在学习过程中查看一些工具的使用方法,将其搬运到自己的创作空间原文链接:STM32高级开发(5)-gcc-arm-none-eabi_Foresights的博客-CSDN博客_arm-none-eabi-gccg......
  • 《计算机网络-自顶向下方法》学习笔记
    TCP和UDPTCP服务TCP服务模型包括面向连接和可靠数据传输服务。当某个应用程序调用TCP作为其运输服务协议时,该应用程序就能获得来自TCP的这两种服务。面向连接的服......
  • 文献管理软件zotero | 下载安装使用与配置分享
    前言最开始阅读文献是使用readpaper平台,在线翻译、做笔记、文献管理都很方便,具体使用可以参考同济子豪兄和官方ReadPaper保姆级教程。但随着科研深入,readpaper的文献管理......
  • Java邮件发送中的setRecipient方法使用
    Java邮件发送中的setRecipient方法使用一、方法setRecipient(Message.RecipientTypetype,Addressaddress),是用于设置邮件的接收者。1、有两个参数,第一个参数是接收者的......
  • Git使用
    git命令的使用#配置git用户信息$gitconfig--globaluser.name"用户名"[email protected]$gitinit #将当前目录作为工作区,生成.......