Echarts数据可视化网址「Echarts快速入门,5分钟搞定」

Echarts是什么

Echarts是一个百度的开源的、强大的、傻瓜式数据可视化js(JavaScript)库,听起来不错。今天就介绍它傻瓜式操作,普通人也能制作出精美的图表,可交互性。

Echarts官网地址:https://echarts.apache.org/

ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

Echarts数据可视化官网(Echarts快速入门,5分钟搞定)

官方网站首页

Echarts快速入门

从官网下载echarts库,其中一个是echarts.js。下面实例就是用了这个js。

Echarts数据可视化官网(Echarts快速入门,5分钟搞定)

Echarts官网配置项手册:
https://echarts.apache.org/zh/option.html#title

1、获取/引用echarts

//npm 获取
npm install echarts --save

//.vue文件准备好dom
<div id="main" :style="{ width: '100%', height: '400px' }"></div>

//项目中引用
import * as echarts from 'echarts';

// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: '这是title',
  },
  color: ['#ee6666', '#91cc75', '#fac858'],//圆柱的颜色
  legend: {},
  dataset: {
    dimensions: ['product', '总作品', '已批阅', '未批阅'],
    source: this.source,
  },
  xAxis: {
    type: 'category',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
})
Echarts数据可视化官网(Echarts快速入门,5分钟搞定)

2、异步请求的动态数据,绘制到图标中

 //异步请求数据的方法async fetchData() {  const { data } = await index(param)  const { list, total } = data  var newlist = []  for (let index = 0; index < list.length; index++) {    newlist.push({      product: list[index].teacher,      总作品: total,      已批阅: list[index].hasFinish,      未批阅: list[index].notFinish,    })  }  this.source = newlist  this.drawEcharts()   //因为请求数据是异步的,所以等this.sourse有数据了,再去调用绘制圆柱图形的方法},

Echarts官方的例子

https://echarts.apache.org/examples/zh/index.html 很丰富 , 也很具有代表性 , 大家也可以在线对官方例子的数据进行编辑 , 可视化其实很简单 , 逐渐摸索慢慢的就会熟悉啦 .

Echarts数据可视化官网(Echarts快速入门,5分钟搞定)

文章标题:Echarts数据可视化网址「Echarts快速入门,5分钟搞定」

文章链接:https://www.linkedcc.com/rjbk/30350

版权声明(详见页尾):本文内容及图片由互联网用户自发投稿贡献,该文观点仅代表作者本人。

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

000-000-000

在线咨询: QQ交谈

邮件:admin@linkedcc.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
【特牛号】企业管理软件资讯平台