四步学会使用ECharts做图

前言：最近有些朋友抱怨用ECharts做统计图时难做，看官网很枯噪无味头又晕，那接下来我简单说下我是怎么四步做图的。
首先先引入安装ECarts依赖，使用webpack工具打包的可以使用命令行安装
npm install echarts --save
然后在局部或全部引入
var echarts = require(‘echarts’)
四步走：
1.划分好容器，定好容器的宽高

<div style="height: 500px; width: 500px;" ref="useAxis"></div>

2.让容器初始化echarts,init进容器中

const useAxis = echarts.init(this.$refs.useAxis)

3.填入配置图表的信息

let option = {legend: {}, //配置图例xAxis: {},  //配置x轴yAxis: {}, //配置y轴series: [{}] //关键的一步，配置系列列表和数据
}

4.容器使用配置信息显示图表

useAxis.setOption(option)

做图，首先要有思路，先把代码结构搭出来，先填入里面的配置项，这样清晰的思路让我们在日常开发中提高效率，不会太被动
例如以下折线统计图绘制：

<template><div><div ref="stLine" style="height: 500px;width: 900px;"></div></div>
</template>
<script>
var echarts = require('echarts');
export default {mounted() {this.getEchartsInfo()
},
methods: {getEchartsInfo() {const exLine = echarts.init(this.$refs.stLine);let exion = {xAxis: {},yAxis: {},tooltip: {},series: [{}]};exLine.setOption(exion);}}
}
</script>

代码结构搭已经搭好，接下来一个一个配置信息进去

<template><div><div ref="stLine" style="height: 500px;width: 900px;"></div></div>
</template>
<script>
var echarts = require('echarts');
export default {mounted() {this.getEchartsInfo()
},
methods: {getEchartsInfo() {const exLine = echarts.init(this.$refs.stLine);let exion = {xAxis: {position: 'bottom',name: '月',nameTextStyle: {color: '#ff00ff'},axisLine: {lineStyle: {color: ' #ffa500'}},axisTick: {show: false,},axisLabel: {color: '#ff00ff'},data: ['1','2','3','4','5','6','7','8','9','10','11','12']},yAxis: {name: '次',align: 'right',nameTextStyle: {color: '#ff00ff'},axisLine: {lineStyle: {color: '#ffa500'}},axisTick: {show: false},splitLine: {show: false},max: 120},tooltip: {trigger: 'item',formatter: '{b}月份{c}次'},series: [{type: 'line',data: [10,21,44,56,47,86,75,30,2,85,36,69]}]};exLine.setOption(exion);}}
}
</script>

到此一个简略的折线统计图已经出来了，四步走起来，ECharts使用起来很是轻松，需要用ECharts参考下，觉得对自己有参考价值的点个赞再走呗！

四步学会使用ECharts做图相关推荐

杠杆炒股从三步学会正确的做t方法
杠杆炒股从三步学会正确的做t方法: 1.第一红白三格误做题,就是说红白线之间的距离如果小于3个格子,那说明股价弹性是不足的,就不要轻易去考虑做题了: 2.第二3~6个可做题,它指的是黄白线的距离超过3 ...
西门子300硬件升级包下载_四步学会用博图建立西门子触摸屏和S7300PLC的通讯
目前国内流行用昆仑通泰触摸屏做项目,一方面价格便宜,另一方面编程简单.但西门子屏也经常会被用到,所以不得不学,不得不回,有网友问到怎么组态西门子触摸屏和PLC的通讯.恰好,有一个项目客户指定用西门子触 ...
echart水滴_漂亮得不像实力派：ECharts 水球图教程
水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果. 那么,今天我们就一起来学习一下,如何使用 ECharts 水球图. 第 ...
灾害应急管理信息化建设“四步走”——以水旱灾害为例
引言中国是世界上受自然灾害影响最为严重的国家之一,其中又以水旱灾害的影响最大.由于我国领土面积广大,河湖众多,且地处亚欧大陆和太平洋之间,季风气候盛行,降水时空分布不均,导致了我国的水旱灾害具有种类 ...
打造爆款产品只需四步，学会你也能爆单
打造爆款产品只需四步,学会你也能爆单亚马逊你会觉得难的原因亚马逊的运营越来越难,原因无怪乎卖家越来越多所致,但亚马逊的整体体量依然保持高速增长却是不争的事实.平台体量增长,卖家的生存却越来越难,固 ...
计算机二级word插入图表,四步教你在excel柱形图上添加折线图
相信很多小伙伴都已经知道如何建立Excel柱形图,但对于在excel柱形图上添加折线图大家又会不会呢?在excel柱形图上添加折线图能让我们的图表更加清晰,而且这还是一个提问率非常高的Excel图表问 ...
四步轻松实现用Visio画UML类图
原文链接:四步轻松实现用Visio画UML类图四步轻松实现用Visio画UML类图本节和大家一起学习一下用Visio画UML类图的方法,主要有四个步骤,这里和大家分享一下,相信通过本节的学习,你对 ...
jsp用Echarts做扇形图
jsp用Echarts做柱状图(静态) 注:本文主要讲述静态数据如果想要动态获取数据可以使用ajax获取数据赋值给data中value即可第一步:去echarts官方下载最新的js; 官方地址 : ...
4米乘以12米CAD图_简单四步，教你如何绘制好施工现场总平面布置图
原标题:简单四步,教你如何绘制好施工现场总平面布置图施工总平面布置图是拟建项目施工场地的总布置图.它按照施工方案和施工进度的要求,对施工现场的道路交通.材料仓库.加工场地.主要机械设备.临时房屋.临 ...

四步学会使用ECharts做图

四步学会使用ECharts做图相关推荐

最新文章

热门文章