js中使用echarts做图表的动态展示

ECharts 是一个基于 JavaScript 的开源可视化图表库，强烈建议在官网上学习，更清楚明了https://echarts.apache.org/zh/index.html

下面的只做为个人开发笔记：

一、环境的安装

安装node.js的情况下，强烈建议通过 npm 获取 echarts，npm install echarts --save

`二、`绘制一个简单的图表

在绘图前我们需要为 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><!-- 引入 echarts.js 和上边的二选一 --><script>import * as echarts from "echarts";</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: {},//想要饼图可以修改type,series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>

图就显示出来了

js中使用echarts做图表的动态展示相关推荐

vue中使用echarts做一个雷达图
在vue中使用echarts做一个雷达图效果如图首先 1.安装echarts npm install echarts -S 2.使用全局使用在main.js中 // 引入echarts imp ...
在jsp中使用ECharts制作图表
ECharts插件的下载地址http://echarts.baidu.com/download.html 先来看看我们要达到的效果!后面直接上代码,如下图: 下面直接贴上代码我们这里写的都是些死的数 ...
vue项目中使用echarts完成图表类的开发之饼图，环形图
最近在vue项目中使用echarts.js完成诸如饼图,环形图,折线图,折线图加柱状图,和柱状图(水平柱状图和垂直柱状图),以及柱状图堆叠,下面请看图片展示: 如上图所示基本上echarts的简单图表 ...
React中使用echarts绘制图表
我们都知道,Echarts图表功能非常强大,使用起来也很方便,我们的项目中就用到了Echarts,现在笔者就带大家看看怎么在react中使用Echarts. 我们要想在react项目中高效使用echa ...
利用echarts做图表统计
以项目中的扇形统计图为例: 第一步: 引入外部echarts.js文件第二步: HTML代码块 <div class="count-body-con count-tj"&g ...
vue 刷新echarts_在vue.js中使用echarts，数据动态刷新
在vue使用echarts时,可能会遇到这样的问题,就是直接刷新浏览器,或者数据变化时,echarts不更新? 这是因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲 ...
JS中new操作符做了什么？
1.new操作符做了什么 new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例.new 关键字会进行如下的操作: 创建一个空的简单JavaScript对象(即{}): 链接该对 ...
uni-app中使用Echarts绘画图表
1.下载安装 npm install echarts mpvue-echarts --save 这时,在node_modules里面会多出 echarts.mpvue-echats .zrender ...
uniapp 中如何使用echart_uni-app中使用Echarts绘画图表
import mpvueEchartsfrom '@/components/mpvue-echarts/src/echarts.vue'; exportdefault{ data() {return{ ...

js中使用echarts做图表的动态展示

一、环境的安装

`二、`绘制一个简单的图表

js中使用echarts做图表的动态展示相关推荐

最新文章

热门文章

js中使用echarts做图表的动态展示

一、环境的安装

二、绘制一个简单的图表

js中使用echarts做图表的动态展示相关推荐

最新文章

热门文章

`二、`绘制一个简单的图表