【ECharts】百度图表插件ECharts使用

百度ECharts报表呈现组件，挺不错的一个组件
官方网址：http://echarts.baidu.com/

下载 ECharts
http://echarts.baidu.com/download.html
你可以选择全部下载或自定义选择自己需要的js包
引入 ECharts
ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html>
<html>
<header><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script>
</header>
</html>

绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 dom 容器。

<body><!-- 为 ECharts 准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>

这样你的第一个图表就诞生了！

ECharts教程：http://echarts.baidu.com/tutorial.html
API：http://echarts.baidu.com/api.html
实例DEMO：http://echarts.baidu.com/examples.html

【ECharts】百度图表插件ECharts使用相关推荐

canvas js 绘图插件_[开盖即食]小程序图表插件eCharts实战
H5时代用来做图表的插件有很多比如:ECharts.Bizcharts.JSCharts等,而这次的小程序本人选用了 ECharts 作为图表组件. 1.选择原因主要有3点: 官方某度在持续维护这个插 ...
Vue 使用图表插件 -- Echarts
目前常用的图表插件有: charts Echarts highcharts d3.js 这次根据Vue 项目中 Echarts 的应用记一笔. 安装插件 npm install echarts -S ...
js图表插件Echarts
在制作网页的时候,我们有时会需要制作图表,自己画一个很麻烦,这个时候就可以用到echarts. echarts 1.下载js文件使用的时候需要下载echarts的js文件(官网链接),可以去官网下载 ...
React中使用图表插件(ECharts)
在React项目中是如何使用ECharts的呢简单粗暴不多bb 直接上代码新手上路不喜勿喷 ECharts文档:https://www.echartsjs.com/zh/option.html# ...
保姆级教程｜ECharts图表插件一文搞懂！
黑马程序员视频库播妞QQ号:3077485083 传智播客旗下互联网资讯.学习资源免费分享平台在前端项目开发中,有很多地方会遇到绘制图表的需求,一般的图表可以通过canvas来绘制,但是遇到复杂一 ...
Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
canvas js 绘图插件_快速入门前端图表插件Echart
在前端项目开发中,有很多地方会遇到绘制图表的需求,一般的图表可以通过canvas来绘制,但是遇到复杂一点的图表怎么办呢? 而且黑马的课程大纲已经把canvas课程删掉了,既然canvas有用,为什么要 ...
echartsjs上证指数k线图表插件
下载地址基于echarts.js图表插件实现的股票k线图表,上证指数图表,K线走势图,K线分析图表代码. dd:
微信小程序图表插件wxcharts.js使用小记，Echarts.js，推荐uCharts.js
一.wxcharts.js 参考地址:https://github.com/xiaolin3303/wx-charts/issues/58 参数含义参考:https://www.cnblogs.com ...

【ECharts】百度图表插件ECharts使用

【ECharts】百度图表插件ECharts使用相关推荐

最新文章

热门文章