当前位置:首页 > 技术文章 > 正文内容

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

zonemu3个月前 (07-21)技术文章26

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

相关文章

vue:组件中之间的传值(vue组件之间传参)

一、父子组件之间的传值----props/$emit1、父组件向子组件传值--props2.子组件想父组件传值-this.$emit('select',item)二、父组件向下(深层)...

Vue2的16种传参通信方式(vue传参数)

前言先直入主题列出有哪些传参方式,下面再通过事例一一讲解。props(父传子)$emit与v-on (子传父)EventBus (兄弟传参).sync与update: (父子双向)v-model (父...

vue3-内置组件-Teleport(vue内置指令有哪些)

Teleport<Teleport> 是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。基本用法有时我们可能会遇到这样的场景:一个组件模板的一部...

Vue3 中有哪些值得深究的知识点?(vue3例子)

众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点。喜欢的话建议收藏,点个关注!1、createAppvue2 和 vue3 在创建实例时,...

10分钟搞定gitlab-ci自动化部署(gitlab ci 配置)

gitlab-ci 是持续集成工具/自动化部署工具,类似 jenkins。持续集成 是将代码集成到共享存储库并尽可能早地自动构建/测试每个更改的实践 - 通常一天几次。概述在编码完成时都会进行打包发布...

程序员开发必会之git常用命令,git配置、拉取、提交、分支管理

整理日常开发过程中经常使用的git命令!git配置SSH刚进入项目开发中,我们首先需要配置git的config、配置SSH方式拉取代码,以后就免输入账号密码了!# 按顺序执行 git config -...