ECharts-可视化入门教程
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ECharts-可视化入门教程相关的知识，希望对你有一定的参考价值。
参考技术A echarts 是js代码 , 本身是属于网页运行的代码 , 平时使用 , 我们只需要把它 引入使用 即可 .但是如果你不了解js代码 , 也不明白怎么编辑js代码 , 那么下面这些基础知识 , 希望你能一并了解.
当然如果你是专业人士 , 可以跳过上面的基础知识 .
如果你对源代码进行修改有需要 , 那么也可以去官方开源地址下载对应的源码进行编译 .
通过标签方式直接 引入 构建好的 echarts
思路打开 , 先找到折线的配置项 , 然后去找点的配置项 , 然后把点给隐藏了 .
下面落实到实际:
例子二 : echarts折线图如何显示数值?
思路打开 , 先找到折线的配置项 , 然后去找标签的配置项 , 然后把标签显示出来 .
官方的例子 https://echarts.apache.org/examples/zh/index.html 很丰富 , 也很具有代表性 , 大家也可以在线对官方例子的数据进行编辑 , 可视化其实很简单 , 逐渐摸索慢慢的就会熟悉啦 .
echarts入门教程
一、echarts介绍
ECharts是由百度团队开发的，可高度个性化定制的数据可视化图表库。它的底层依赖轻量级的Canvas类库ZRender，是一个纯JavaScript的图标库，兼容（IE8/9/10/11，Chrome，Firefox，Safari等）主流浏览器，可以运行在PC和移动设备上。
二、完成一个简单图标
废话不多说，一起来完成一个简单的图表，体验一下ECharts的神奇吧！
1.引入ECharts
ECharts3开始不再强制使用AMD的方式按需引入，那么简单粗暴，直接在官网下载所需ECharts文件，像引入普通JavaScript库一样用script标签引入即可。简单吧，看代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ECharts入门</title> </head> <body> <!-- 引入ECharts文件 --> <script src=\'echarts.min.js\'></script> </body>
</html>
注：建议把js文件放在body下方
2.准备一个具备宽高的DOM容器
<body> <!-- 为ECharts准备一个具备大小（宽高）的DOM容器--> <div id=\'main\' style=\'width:600px;height:400px;\'></div> </body>
3.初始化一个echarts实例
<body> <!-- 为ECharts准备一个具备大小（宽高）的DOM容器--> <div id=\'main\' style=\'width:600px;height:400px;\'></div> <!--引入echarts.js--> <script src=\'./echarts.min.js\'></script> <script> //基于准备好的DOM，初始化echarts实例 var myChart = echarts.init(document.getElementById(\'main\')); </script> </body>
4.指定图表的配置项和数据
//指定图表的配置项和数据
var option = { title:{ text:\'EChars入门\' }, //提示框组件 tooltip:{ //坐标轴触发，主要用于柱状图，折线图等 trigger:\'axis\' }, //图例 legend:{ data:[\'销量\'] }, //横轴 xAxis:{ data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, //纵轴 yAxis:{}, //系列列表。每个系列通过type决定自己的图表类型 series:[{ name:\'销量\', //折线图 type:\'line\', data:[5, 20, 36, 10, 10, 20] }] };
5.显示图标
//使用刚指定的配置项和数据显示图表 myChart.setOption(option);
6.完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ECharts入门</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的DOM容器--> <div id=\'main\' style=\'width:600px;height:400px;\'></div> <!-- 引入ECharts文件 --> <script src=\'./echarts.min.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决定自己的图表类型 series:[{ name:\'销量\', //折线图 type:\'line\', data:[5, 20, 36, 10, 10, 20] }] }; //使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html>
7.生成图表，如图：
就这样，一个漂亮的图表生成了，是不是很简单呢？
以上是关于ECharts-可视化入门教程的主要内容，如果未能解决你的问题，请参考以下文章