Eacharts 简单使用

首先先贴出 网址  https://www.echartsjs.com/zh/index.html

Echarts 商业级数据图表,一般都是用这种,它是一个纯JavaScript 的图标库,兼容绝大部分的浏览器,底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. 创新的拖拽重计算,数据视图,值域漫游等特性大大增强了用户体验,,赋予了用户对数据进行挖掘,整合的能力.

Echarts支持的图表？　

折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）

雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表

 

echarts和chart对比

echarts的优点：
1.国人开发，文档全，便于开发和阅读文档。
2.图表丰富，可以适用各种各样的功能。
echarts的缺点：
移动端使用略卡，毕竟是PC端的东西，移植到移动端肯定多多少少有些问题吧，或许跟自己水平也有一定的关系，哎怎么说呢。
echarts不失为一款比较适合我们这种码农使用的框架。
echarts就不贴代码了。毕竟文档很全。
chart.js优点：
1.轻量级，min版总大小50多k。
2.移动端使用比较流畅，毕竟小。
chart.js缺点：
1.功能欠缺比较多。
2.中文文档奇缺。

 

下面贴出几个实例

复制代码
 1 @{
 2     ViewBag.Title = "Index";
 3 }
 4 
 5 <script src="~/Cords/incubator-echarts-4.2.1/incubator-echarts-4.2.1/dist/echarts.js"></script>
 6 <h2>Index</h2>
 7 
 8 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
 9 <div id="main" style="width: 600px;height:400px;"></div>
10 
11 <script type="text/javascript">
12     // 基于准备好的dom，初始化echarts实例
13     var myChart = echarts.init(document.getElementById('main'));
14 
15     // 指定图表的配置项和数据
16     var option = {
17         title: {
18             text: 'ECharts 入门示例'
19         },
20         tooltip: {},
21         legend: {
22             data: ['销量']
23         },
24         xAxis: {
25             data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
26         },
27         yAxis: {},
28         series: [{
29             name: '销量',
30             type: 'bar',
31             data: [5, 20, 36, 10, 10, 20]
32         }]
33     };
34 
35     // 使用刚指定的配置项和数据显示图表。
36     myChart.setOption(option);
37 </script>
1. 简单条形图
复制代码

这个是一个简单图表，里面数据是写死的，可以根据自己需要调用API接口或者其他技术来实现数据的填充

复制代码
 1 @{
 2     ViewBag.Title = "MapShow";
 3 }
 4 <script src="~/Cords/incubator-echarts-4.2.1/incubator-echarts-4.2.1/dist/echarts.js"></script>
 5 <script src="~/Scripts/jquery-3.3.1.js"></script>
 6 <h2>MapShow</h2>
 7 
 8 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
 9 <div id="main" style="width: 600px;height:400px;"></div>
10 
11 <script type="text/javascript">
12     var names = [];
13     var nums = [];
14 
15     $.ajax({
16         url: "/Map/SaveMapShow",
17         type: "get",
18         dataType: "json",
19         success: function (data) {
20             for (var i = 0; i < data.length; i++) {
21                 names.push(data[i].Gname);
22             }
23             for (var i = 0; i < data.length; i++) {
24                 nums.push(data[i].Gcount);
25             }
26             // 基于准备好的dom，初始化echarts实例
27             var myChart = echarts.init(document.getElementById('main'));
28 
29             // 指定图表的配置项和数据
30             var option = {
31                 title: {
32                     text: 'ECharts 入门示例'
33                 },
34                 tooltip: {},
35                 legend: {
36                     data: ['销量']
37                 },
38                 xAxis: {
39                     data: names
40                 },
41                 yAxis: {},
42                 series: [{
43                     name: '销量',
44                     type: 'bar',
45                     data: nums
46                 }]
47             };
48 
49             myChart.setOption(option);
50         }
51     })
52 </script>
2. 从数据库获取
复制代码

这个死MVC从数据库中获取到数据，然后展示到页面

中国地图，自己封装一个china js 文件，文件我贴出来，然后其他正常

复制代码
 1 @{
 2     ViewBag.Title = "MapChina";
 3 }
 4 <script src="~/Cords/incubator-echarts-4.2.1/incubator-echarts-4.2.1/dist/echarts.js"></script>
 5 <script src="~/Cords/incubator-echarts-4.2.1/incubator-echarts-4.2.1/China.js"></script>
 6 <h2>MapChina</h2>
 7 
 8 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
 9 <div id="main" style="width: 600px;height:400px;"></div>
10 
11 <script>
12     function randomData() {
13         return Math.round(Math.random() * 500);
14     } 
15     var mydata = [
16         { name: '北京', value: '100' }, { name: '天津', value: randomData() },
17         { name: '上海', value: randomData() }, { name: '重庆', value: randomData() },
18         { name: '河北', value: randomData() }, { name: '河南', value: randomData() },
19         { name: '云南', value: randomData() }, { name: '辽宁', value: randomData() },
20         { name: '黑龙江', value: randomData() }, { name: '湖南', value: randomData() },
21         { name: '安徽', value: randomData() }, { name: '山东', value: randomData() },
22         { name: '新疆', value: randomData() }, { name: '江苏', value: randomData() },
23         { name: '浙江', value: randomData() }, { name: '江西', value: randomData() },
24         { name: '湖北', value: randomData() }, { name: '广西', value: randomData() },
25         { name: '甘肃', value: randomData() }, { name: '山西', value: randomData() },
26         { name: '内蒙古', value: randomData() }, { name: '陕西', value: randomData() },
27         { name: '吉林', value: randomData() }, { name: '福建', value: randomData() },
28         { name: '贵州', value: randomData() }, { name: '广东', value: randomData() },
29         { name: '青海', value: randomData() }, { name: '西藏', value: randomData() },
30         { name: '四川', value: randomData() }, { name: '宁夏', value: randomData() },
31         { name: '海南', value: randomData() }, { name: '台湾', value: randomData() },
32         { name: '香港', value: randomData() }, { name: '澳门', value: randomData() }
33     ]; 
34     var optionMap = {
35         backgroundColor: '#FFFFFF',
36         title: {
37             text: '全国地图大数据',
38             subtext: '',
39             x: 'center'
40         },
41         tooltip: {
42             trigger: 'item'
43         },
44 
45         //左侧小导航图标
46         visualMap: {
47             show: true,
48             x: 'left',
49             y: 'center',
50             splitList: [
51                 { start: 500, end: 600 }, { start: 400, end: 500 },
52                 { start: 300, end: 400 }, { start: 200, end: 300 },
53                 { start: 100, end: 200 }, { start: 0, end: 100 },
54             ],
55             color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
56         },
57 
58         //配置属性
59         series: [{
60             name: '数据',
61             type: 'map',
62             mapType: 'china',
63             roam: true,
64             label: {
65                 normal: {
66                     show: true  //省份名称  
67                 },
68                 emphasis: {
69                     show: false
70                 }
71             },
72             data: mydata  //数据
73         }]
74     };
75     //初始化echarts实例
76     var myChart = echarts.init(document.getElementById('main'));
77 
78     //使用制定的配置项和数据显示图表
79     myChart.setOption(optionMap);
80 </script>
中国地图
复制代码

 

这几个是几个基本的类型，其他的可以参考上面网址来练习

　　

 

posted @   进步中的小牛  阅读(4768)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
· 零经验选手，Compose 一天开发一款小游戏！
点击右上角即可分享
微信分享提示