echarts 制作图表固定的三个步骤

1.导入js(）

（1）Echarts官网（第三方可视化图表库）：Apache ECharts

（2）echart.js（引入的js文件）下载地址：https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js

2. 为echarts图表准备一个具有宽高的盒子

3.js的初始化

所有的图表使用步骤都是固定的这三步，不同的图表仅仅只是配置项和数据不同而已

每次只需要替换 let option={...} 中的option={...}即可

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 1.引入 相对于自己的ECharts 文件 --><script src="./echarts/echarts.min.js"></script>
</head><body><!-- 2.准备具备宽高的盒子--><div id="main" style="width: 600px;height:400px;"></div><script>// 3.1 初始化echarts实例let myChart = echarts.init(document.querySelector('#main'));// 3.2 指定图表的配置项和数据let option = {tooltip: {trigger: 'axis',position: function(pt) {return [pt[0], '10%'];}},title: {left: 'left',text: '2021全学科薪资走势'},toolbox: {feature: {dataZoom: {yAxisIndex: 'none'},restore: {},saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']},yAxis: {type: 'value',boundaryGap: [0, '100%']},series: [{name: '薪资',type: 'line',symbol: 'emptyCircle',symbolSize: 8,smooth: true,sampling: 'lttb',itemStyle: {color: '#25b0ec'},areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'aqua'}, {offset: 1,color: '#ebf8fd'}])},data: [12000, 23000, 32000, 22000, 12000, 13000, 23440, 54330, 23330, 12000, 23000, 32000]}]};// 3.3显示图表。myChart.setOption(option)</script>
</body></html>

运行后的图表如下：

echarts 制作图表固定的三个步骤相关推荐

在jsp中使用ECharts制作图表
ECharts插件的下载地址http://echarts.baidu.com/download.html 先来看看我们要达到的效果!后面直接上代码,如下图: 下面直接贴上代码我们这里写的都是些死的数 ...
echarts制作图表同时有3d柱状图与折线图
echarts制作图表同时有3d柱状图与折线图工作遇到,小可爱们可直接抄作业,使用的pictorialBar 工作遇到,小可爱们可直接抄作业,使用的pictorialBar echarts封装,使用 ...
使用Echarts制作图表基础教程
在我们前端开发的过程中,会涉及到很多图表,如果用源生的js和css3制作的话,需要耗费大量的时间,同时代码量需求也比较大,那么我们在开发的过程中讲究的是效率,如果单单在制作图表的过程中就耗费了大量的时 ...
echarts ucharts 和_使用chart和echarts制作图表
前言 chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.它可以帮你用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕 ...
在Java web页面使用ECharts制作图表
前言因为最近在做一项课设,需要可视化,因此选择echarts.但因为太久没用了,所以忘记了怎么在web页面引用echarts,在这里做个记录,开发工具是VSCODE. 一.下载echarts.min ...
【微信小程序】关于使用ECharts制作图表
halo小伙伴们,在原生微信小程序中会遇到需要开发图表,这总不能自己手撸一个吧?多费力啊,这就不得不说ECharts的好用之处了.接下来我来说下微信小程序使用ECharts的一个过程吧 ECharts ...
玩转ECharts制作图表之散点图
散点图适用于三维数据集,但其中只有两维需要比较. 散点图 ECharts基本构建代码结构准备x轴和y轴数据,二维数组[[身高,体重],[]-] 将type的值设置为scatter,x轴和y轴的typ ...
玩转ECharts制作图表之折线图
折线图适合二维的大数据集,尤其是那些趋势比单个数据点更重要的场合 markArea //标注空间 (xAxis的值要与xdata值中取出)markArea: {data: [[{xAxis: '1月' ...
制作杂志级图表的第三步：突破excel的图表类型
杂志级图表的第三步:突破excel的图表类型今天要说的这一点其实很简单,单独写是因为逻辑上的原因. 很多人做图表都是用excel的图表向导,使用已有的图表类型,如果excel的标准类型和自定义类型中 ...

echarts 制作图表固定的三个步骤

echarts 制作图表固定的三个步骤相关推荐

最新文章

热门文章