简介

Vue 中常使用的图标主要包括 e-charts 和 v-charts，如果仅为简单使用图表，推荐使用 v-charts，如果使用图表较为复杂，则使用 e-charts。
自定义封装简易版本的 v-charts 可以去封装组件复制使用。

v-charts

npm安装

npm i v-charts echarts -S

cdn引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">

如需使用百度或高德地图，则还需引入相对应地图cdn

<script src="https://cdn.jsdelivr.net/npm/echarts-amap/dist/echarts-amap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>

项目引入

全部引入

// main.js
import Vue from 'vue'
import VCharts from 'v-charts'
import App from './App.vue'Vue.use(VCharts)new Vue({el: '#app',render: h => h(App)
})

按需引入

 |- lib/|- line.common.js  -------------- 折线图|- bar.common.js  --------------- 条形图|- histogram.common.js  --------- 柱状图|- pie.common.js  --------------- 饼图|- ring.common.js  -------------- 环图|- funnel.common.js  ------------ 漏斗图|- waterfall.common.js  --------- 瀑布图|- radar.common.js  ------------- 雷达图|- map.common.js  --------------- 地图|- sankey.common.js  ------------ 桑基图|- heatmap.common.js  ----------- 热力图|- scatter.common.js  ----------- 散点图|- candle.common.js  ------------ k线图|- gauge.common.js  ------------- 仪表盘|- tree.common.js  -------------- 树图|- bmap.common.js  -------------- 百度地图|- amap.common.js  -------------- 高德地图

import Vue from 'vue'
import VeLine from 'v-charts/lib/line.common'
import App from './App.vue'Vue.component(VeLine.name, VeLine)new Vue({el: '#app',render: h => h(App)
})

e-charts

npm 安装

npm install echarts --save

cdn 引入

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>

下载

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

项目引入

全部引入

import * as echarts from 'echarts';// 需要展示图表的 mounted
// 基于准备好的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]}]
});

按需引入

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';// 需要展示图表的 mounted
// 注册必须的组件
echarts.use([TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,BarChart,LabelLayout,UniversalTransition,CanvasRenderer
]);// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({// ...
});

使用（v-charts为例）

<template><div><ve-line:extend="extend"/></div>
</template><script>
export default {data() {return {extend:{title: {text: 'ECharts 入门示例'},tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]}}}
}
</script>

Vue图表(v-charts, e-charts)入门安装使用相关推荐

❤️《Vue前端基础框架集合从入门到高级》（小白也可学，建议收藏）❤️
<Vue前端基础框架集合从入门到高级>,小白也可学文章目录 <Vue前端基础框架集合从入门到高级>,小白也可学 ❤️一.前端核心分析 ❤️1.1.概述 ❤️1.2.前端三要素 ...
vue 图表组件_用于制作图表的简单轻巧的Vue组件
vue 图表组件纯Vue图表 (Pure Vue Chart) A simple and lightweight vue component for making charts that do no ...
Linux下MongoDB的入门安装、配置与启动
Linux下MongoDB的入门安装.配置与启动 mongo非关系性数据库查询性能好,数据性不是特别重要的情况下使用 [root@test ~]# tar xf mongodb-linux-x86_ ...
Vue项目中tinymce富文本的安装以及配置
Vue项目中tinymce富文本的安装以及配置对于目前网上存在的许多富文本插件中,个人还是觉得tinymce相对比较强大一些.在使用配置的过程中,可能会出现配置不完全,导致使用不了的情况,下面把我个 ...
vue 图表组件库 vue-highcharts
原文链接: vue 图表组件库 vue-highcharts 上一篇: flask 前端应用展示下一篇: Python shutil 模块文件操作 git https://github.com/ ...
stylus vue 报错_【Vue】Re01 理论概念和入门上手
一.Vue概述什么是渐进式?1.把Vue作应用的一部分嵌套项目中2.如果完全抛弃其他组件和框架,Vue又具有丰富的生态和库莱支持3.Core + Router + VueX 满足项目绝大多数的需求- ...
安装Vue的脚手架时遇到的无法安装问题
项目场景:安装Vue的脚手架时遇到的无法安装问题问题描述以管理员身份进入命令控制符想要安装Vue的脚手架,提示安装成功后输入vue指令检查却显示:'vue' 不是内部或外部命令,也不是可运行的程序 ...
《Vue》初识、摘要及入门
前言在如今的前端行业,选择一门框架进行开发不仅仅能大幅提升开发效率而且可以更好的使得项目方便管理,维护,而前端框架中主流的则分为:React,Angular和Vue,其中Vue在这两年发展的非常快, ...
Redis 入门安装（Linux）
Redis 入门安装(Linux) 备注:该案例讲解基于CentOS6.5.Reids3.2.8 Redis 官网中文地址:http://www.redis.cn/ 英文地址:https://red ...
记一次Spring boot 和Vue的前后端分离的入门培训
记一次Spring boot 和Vue的前后端分离的入门培训由于公司之前是写C#的,现在要转 Java分布式 + vue,所以进行一次前后端的简单培训. 前端工具和环境: Node.js V10.1 ...

Vue图表(v-charts, e-charts)入门安装使用

简介

v-charts

npm安装

cdn引入

项目引入

e-charts

npm 安装

cdn 引入

下载

项目引入

使用（v-charts为例）

Vue图表(v-charts, e-charts)入门安装使用相关推荐

最新文章

热门文章