介绍一款数据可视化编程工具-ECharts

boyanx3周前技术教程10

ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。


从官网下载echarts库,其中一个是echarts.js。下面实例就是用了这个js。


试了一下官网提供的入门示例:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>echarts实例1</title>

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

</head>

<!--为echart准备一个定义了宽高的DOM!-->

<body>

<div id="main" style="width:650px;height:500px;"></div>

<script type="text/javascript">

//基于准备好的dom,初始化echarts实例

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

//制定图标的配置项和数据

var option ={

title:{

text:'echart入门实例'

},

tooltip:{},

legend:{

data:['销量']

},

xAxis:{

data:['电冰箱','洗衣机','空调','电饭锅','空气炸锅','高压锅']},

yAxis:{},

series:[

{

name:'销量',

type:'bar',

data:[500,200,300,1000,1000,300]

}

]

};

//使用上述自定的配置项和数据显示图表

myChart.setOption(option);

</script>

</body>

</html>



官网网址:

https://echarts.apache.org/zh/index.html

相关文章

前端哭了!弃用ECharts!Vue3图表神器10分钟搞掂可视化

前端必看,告别ECharts!Vue3图表神器横空出世!发现一个让数据可视化效率飙升的宝藏库:Vue Data UI。以前用ECharts做图表,光调配置就像在解数学题,分分钟想砸电脑。直到发现Vue...

分享20份大屏可视化模板,用工具直接套用

最近,我接手了一个大屏幕项目,从初步研究需求到原型设计再到模型开发,我花了半个多月的时间。在这个过程中,我还踩了很多坑,我深深感到开发大屏幕项目并不容易(领导能力要求太高),我也借此与你分享我之前收集...

37【源码】数据可视化:基于 Echarts + Python 动态实时大屏

效果图展示1.动态效果演示2.静态切片效果图一、确定需求方案1.确定产品上线部署的屏幕LED分辨率本案例基于16:9 屏宽比,F11全屏显示。2.部署方式浏览器打开播放,Chrome浏览器、360浏览...

基于vue+echarts 数据可视化科技大屏精彩案例展示及分享

获取 ECharts 的路径有以下几种,请根据您的情况进行选择:1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也...

数据可视化—Echarts图表应用(数据可视化图表制作工具)

ECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。使用 JavaScript 实现开源的可视化库,可以流畅的...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。