Vue使用Echarts实现数据可视化的方法详解

目录

• 一，Echarts
• 1.1 获取ECharts
• 1.2 引入 ECharts
• 二，Vue使用Echarts
• 2.1 Vue环境
• 2.2 main.js引入Echarts
• 2.3 使用模板
• 2.4实例
• 2.4.1柱状图（折线图变换）
• 2.4.2极坐标柱状图标签
• 总结

一，Echarts

一个基于 JavaScript 的开源可视化图表库

Echarts官网

https://echarts.apache.org/zh/index.html

1.1 获取ECharts

（1）从 npm 获取（项目获取）

npm install echarts --save

（2）从 CDN 获取

推荐从 jsDelivr 引用 echarts。

（3）从 GitHub 获取

apache/echarts 项目的 release 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件。

1.2 引入 ECharts

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

二，Vue使用Echarts

2.1 Vue环境

ES6、vue、vuex、vue-router、vue-cli、axios、element-ui
Node >= 10

2.2 main.js引入Echarts

// 引入Echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

2.3 使用模板

2.4实例

2.4.1柱状图（折线图变换）

2.4.2极坐标柱状图标签

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!