echarts入门

最新推荐文章于 2024-05-27 22:32:19 发布

不会打字314

最新推荐文章于 2024-05-27 22:32:19 发布

阅读量114

点赞数 1

分类专栏：前端文章标签：可视化

本文链接：https://blog.csdn.net/shaoming314/article/details/114263617

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

echarts入门

参考网址:

https://blog.csdn.net/qq_15901351/article/details/80194485?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161458196316780271571835%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=161458196316780271571835&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-1-80194485.first_rank_v2_pc_rank_v29&utm_term=echarts%E5%85%A5%E9%97%A8%E6%A1%88%E4%BE%8B

https://blog.csdn.net/Bear_people_clan/article/details/110817266?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&dist_request_id=b8376ff8-9cb8-4ad2-9742-36b7b1040326&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

1.echarts简介

ECharts是由百度团队开发的，可高度个性化定制的数据可视化图表库。它的底层依赖轻量级的Canvas类库ZRender，是一个纯JavaScript的图标库，兼容（IE8/9/10/11，Chrome，Firefox，Safari等）主流浏览器，可以运行在PC和移动设备上。

Echarts的特性：

丰富的图表类型：
常用的有折线图，柱状图，散点图，饼图，盒形图，用于地理数据可视化的地图，热力图，线图等

多个坐标系的支持
直角坐标系（catesian，同 grid）、极坐标系（polar）、地理坐标系（geo）

移动端的优化
按需打包,体积缩小为 ECharts 2 的 40%

深度的交互式数据探索
支持在数据的各种坐标轴、维度进行数据过滤、缩放，以及在更多的图中采用这些组件

2.入门实例

柱状图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试echarts1</title>
	<script src="./echarts.min.js"></script>
	</head>
<body>

   <!-- 为ECharts准备一个具备大小（宽高）的DOM容器-->

   <div id='main' style='width:600px;height:400px;'></div>

  <!-- 引入ECharts文件 -->

   <script src='echarts/echarts.js'></script>

   <script>

          //基于准备好的DOM，初始化echarts实例

        var myChart =echarts.init(document.getElementById('main'));

          //指定图表的配置项和数据

        var option = {

            title:{

                text:'EChars入门'

            },

            //提示框组件

            tooltip:{

                //坐标轴触发，主要用于柱状图，折线图等

                trigger:'axis'

            },

            //图例

            legend:{

                data:['销量']

            },

            //横轴

            xAxis:{

                data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

            //纵轴

            yAxis:{ type: 'value'},

            //系列列表。每个系列通过type决定自己的图表类型

            series:[{

                name:'销量',

                //柱状图

                type:'bar',

                data:[5, 20, 36, 10, 10, 20]

            }]

        };

        //使用刚指定的配置项和数据显示图表

        myChart.setOption(option);

   </script>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fn0wQ9g0-1614583354974)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210301151615832.png)]

折线图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试echarts1</title>
	<script src="./echarts.min.js"></script>
	</head>
<body>

   <!-- 为ECharts准备一个具备大小（宽高）的DOM容器-->

   <div id='main' style='width:600px;height:400px;'></div>

  <!-- 引入ECharts文件 -->

   <script src='echarts/echarts.js'></script>

   <script>

          //基于准备好的DOM，初始化echarts实例

        var myChart =echarts.init(document.getElementById('main'));

          //指定图表的配置项和数据

        var option = {

            title:{

                text:'EChars入门'

            },

            //提示框组件

            tooltip:{

                //坐标轴触发，主要用于柱状图，折线图等

                trigger:'axis'

            },

            //图例

            legend:{

                data:['销量']

            },

            //横轴

            xAxis:{

                data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

            //纵轴

            yAxis:{ type: 'value'},

            //系列列表。每个系列通过type决定自己的图表类型

            series:[{

                name:'销量',

                //折线图

                type:'line',

                data:[5, 20, 36, 10, 10, 20]

            }]

        };

        //使用刚指定的配置项和数据显示图表

        myChart.setOption(option);

   </script>

</body>
</html>

type:‘line’,

data:[5, 20, 36, 10, 10, 20]

}]

};

//使用刚指定的配置项和数据显示图表

myChart.setOption(option);


[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YhQXh7lC-1614583354976)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20210301151632231.png)]

不会打字314

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
echarts入门

echarts入门参考网址:https://blog.csdn.net/qq_15901351/article/details/80194485?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161458196316780271571835%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=1614581963167802715718
复制链接

扫一扫

专栏目录