ECharts，一个使用 JavaScript 实现的开源可视化库，百度出品，底层依赖轻量级的矢量图形库ZRender，兼容大部分PC和移动端的浏览器，提供直观，交互丰富，可高度个性化定制的数据可视化图表。看看http://echarts.baidu.com/feature.html的示例，真心不错。

快速入手

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js,下载至本地 http://www.echartsjs.com/download.html--><script src="echarts.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// api详见http://echarts.baidu.com/api.html// 初始化echarts对象var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: { text: 'ECharts'},tooltip: {  show: true }, //提示框toolbox: { //工具栏show: true,feature: {dataView: {readOnly: false},saveAsImage: {},dataZoom: {}}},legend: {  data:['利润','销量'] },//图例xAxis: { //横轴type: 'category',  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: [ //纵轴*2{ type: 'value', name: '利润', scale: true, min: 0, max: 5000 },{ type: 'value', name: '销量',  scale: true, min: 0,   max: 50 } ],series: [  //数据{ name: '利润',  type: 'line', data: [1000,3000,5000,2000,1500,4000]  }, //折线图{ name: '销量', yAxisIndex: 1,  type: 'bar', data: [5, 20, 36, 10, 10, 20] } //直方图]
};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>

ECharts 前端数据可视化相关推荐

前端数据可视化可绘制地图等插件:Highcharts、Echarts和D3
前端数据可视化插件有很多,但我用过的只有Highcharts(https://www.hcharts.cn/).Echarts(http://echarts.baidu.com/)和D3(https: ...
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...
用最科学的方法展示最形象的图表——前端数据可视化实践
前言也许很多人都会觉得奇怪,在这样一个更多以后台数据分析为主的公司,为什么需要一个专注于前端的团队?今天这篇文章就来讲述那些年我们错过的前端数据可视化,以此来解答这个问题. 需求那么,在我们的项目 ...
Hadoop+hive+flask+echarts大数据可视化之系统数据收集
Hadoop+hive+flask+echarts大数据可视化项目(一) --------------系统数据收集---------------- 谈到大数据的项目,一般以数据可视化为主体,收集大数据 ...
Hadoop+hive+flask+echarts大数据可视化项目之flask结合echarts前后端结合显示hive分析结果
Hadoop+hive+flask+echarts大数据可视化项目(五) ------flask与echarts前后端结合显示hive分析结果------- 关注过Hadoop+hive+flask+ ...
基于java web和echarts的数据可视化项目
EchartDemo 项目介绍基于java web和echarts的数据可视化项目主要分析浙江省各市区的gdp和固定资产投资.以及房产数据,数据源浙江省经济社会发展统计,数据经过整理后插入数据库中 ...
Hadoop+hive+flask+echarts大数据可视化项目之hive环境搭建与系统数据的分析思路
Hadoop+hive+flask+echarts大数据可视化项目(四) --------------hive环境搭建与系统数据的分析思路---------------- 关注过Hadoop+hive ...
Vue使用Echarts实现数据可视化
Vue使用Echarts实现数据可视化一,Echarts 1.1 获取ECharts 1.2 引入 ECharts 二,Vue使用Echarts 2.1 Vue环境 2.2 main.js引入Ech ...
ECharts实现数据可视化超详细基础入门教程
ECharts实现数据可视化超详细基础入门教程 ECharts介绍 ECharts官网:https://echarts.apache.org/zh/index.html ECharts是一款基于Jav ...
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理目录 Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理一.简单介绍二. ...

ECharts 前端数据可视化

快速入手

ECharts 前端数据可视化相关推荐

最新文章

热门文章