使用echarts（一）第一次使用echarts

第一次使用echarts

引入 ECharts

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script><title>Document</title>
</head>
<body></body>
</html>

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

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

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

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script><title>Document</title>
</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>

详细参数说明： https://www.w3cschool.cn/echarts_tutorial/

使用echarts（一）第一次使用echarts相关推荐

java中点击按钮出现echarts图表_echarts 显示下载按钮，echarts 自定义按钮，echarts 添加按钮...
echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...
html 网页地图集制作ECHARTS,在页面使用echarts的地图（解决地图不完整）
测试环境:IDEA+Tomcat7 谷歌浏览器创建好web工程,编写jsp页面,在自己编写的JSP页面上导包现在echarts停止了在其网站上下载地图脚本,直接通过src引用网站上的china.j ...
ECharts 安装和实现-echarts.min.js
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求. ECharts 遵循 Apache-2.0 开源协议,免费商用. ECharts 兼容当前绝大部分 ...
echarts案例大全，echarts的Demo网站有哪些
很多开发人员用到echarts做大屏展示,一般常用的网站是 Apache Echarts,但是这个一个网站的demo不一定满足我们,那么除了Apache Echarts还有哪些我们可以用的echart ...
echarts社区（多样化echarts图表）
1.社区资源地址:https://www.makeapie.com/explore.html 社区链接 2.页面使用echarts图可以参考echarts文档跳转到echarts 2.1 安装依 ...
vue3+ts 之echarts的使用以及 echarts 图表初始不渲染,代码改变之后才渲染
vue3+ts 之echarts的使用以及 echarts 图表初始不渲染,代码改变之后才渲染前言一.按需引入 ECharts 图表和组件二.使用步骤 1.还是先上代码叭 2. 上实现效果 ! ...
【Vue ECharts开发】自定义echarts柱状图颜色渐变效果
1. 效果演示 2. 示例代码 Vue 模板代码: <template><div><div id="main"></div>< ...
第一次使用echarts绘图（心得）
Echarts官网链接我就是用这个实例图来绘制的,突然感觉echarts用起来好简单,哈哈我下载了官方实例后,进行了相应的修改,下面是我的代码: <div class="row&q ...
ECharts学习总结(五):echarts的Option概览
注:下面内容摘自echarts官网,原文地址:http://echarts.baidu.com/doc/doc.html#%E9%80%89%E9%A1%B9 option 图表选项,包含图表实例任何 ...

使用echarts（一）第一次使用echarts

第一次使用echarts

引入 ECharts

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

使用echarts（一）第一次使用echarts相关推荐

最新文章

热门文章

使用echarts（一） 第一次使用echarts

第一次使用echarts

引入 ECharts

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

使用echarts（一） 第一次使用echarts相关推荐

最新文章

热门文章

使用echarts（一）第一次使用echarts

使用echarts（一）第一次使用echarts相关推荐