【Echarts系列】Vue2项目如何引入echarts

一、安装 Echarts

npm install echarts --save

二、在 main.js 中全局引入 Echarts

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

三、在vue文件中使用: `（注：挂载 echarts 图的父级盒子必须有宽高）`

<template><div class="home"><!-- 这个 div 就会被解析为 echarts图 --><div class="barChart" ref="barChart"></div></div>
</template><script>
export default {mounted() {// 初始化 echartsthis.initBarChart();},methods: {initBarChart() {// 通过 $ref 进行挂载let myChart = this.$echarts.init(this.$refs.barChart);let option = {xAxis: {type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {type: "value",},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: "bar",showBackground: true,backgroundStyle: {color: "rgba(180, 180, 180, 0.2)",},},],};myChart.setOption(option);},},
};
</script>
<style scoped lang="less">
.home {width: 500px;height: 400px;margin: auto;border: 3px solid lightcoral;//  宽高是必须给的，可以给百分比、具体的像素等.....barChart {width: 100%;height: 100%;}
}
</style>

效果图：

四：`如果想要其他图，比如饼图：`

一、点击进入echarts官网

二、进行如下操作即可

【Echarts系列】Vue2项目如何引入echarts相关推荐

vue2项目中封装echarts地图的比较优雅的方式
以前写过 vue项目中封装echarts的比较优雅的方式,大屏可视化里面,除了数据图表很常用,显示省市地图区域也是很常用到的,这是姐妹篇. 区域地图选区域时,需要弹窗展示数据,样式是各种各样的,各种排 ...
1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列
一.echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一,是用折线将各个数据点标志连接起来的图表,不仅可以表示数量的多少,而且可以反映同一事物在不同时间里的 ...
react项目中引入echarts图表
一.在一般html页面使用 1.在已有项目的终端输入进行安装 npm install echarts --save 2.在import里面输入 import echarts from 'echarts ...
echarts中graphic_vue项目中引入echart 调用其graphic方法报错的问题
index.js中引入echart 在页面当中想要使用echart方法 const lineOpts = { //鼠标移上去时的提示框 tooltip: { trigger: 'axis', text ...
vue2 项目中引入iconfont
在线使用 1.找到这个地址,在index.html中link引入 <link rel="stylesheet" href="//at.alicdn.com/t/c/ ...
【ECharts系列|01入门】从入门到天黑【入门级教程实战】
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求. ECharts 遵循 Apache-2.0 开源协议,免费商用. ECharts 兼容当前绝大部分 ...
vue引入Echarts画饼图详解
目录 1 引入Echarts 1.1 安装 1.2 引入 1.3 基本使用 2 基本饼状图 3 为饼图添加标题等属性 3.1 标题图例 3.2 数据展示 3.3 样式设置 4 饼图扩展 5 总结 1 ...
vue引入Echarts画折线图、平滑曲线图、转化数学公式详解
目录 1 引入Echarts 1.1 安装 1.2 引入 1.3 基本使用 2 基本折线图 3 复杂折线图 3.1 多条折线 3.2 动态变化折线图 4 笛卡尔坐标系中的折线图 5 平滑曲线图 6 折 ...
ECharts数据可视化项目-大屏数据可视化【持续更新中】
ECharts数据可视化项目-大屏数据可视化[持续更新中] 文章目录 ECharts数据可视化项目-大屏数据可视化[持续更新中] 一. 数据可视化ECharts使用二.技术栈三.数据可视化四.可 ...

【Echarts系列】Vue2项目如何引入echarts

一、安装 Echarts

`npm install echarts --save`

二、在 main.js 中全局引入 Echarts

三、在vue文件中使用: `（注：挂载 echarts 图的父级盒子必须有宽高）`

效果图：

四：`如果想要其他图，比如饼图：`

一、点击进入echarts官网

二、进行如下操作即可

【Echarts系列】Vue2项目如何引入echarts相关推荐

最新文章

热门文章

【Echarts系列】Vue2项目如何引入echarts

一、安装 Echarts

npm install echarts --save

二、在 main.js 中全局引入 Echarts

三、在vue文件中使用: （注：挂载 echarts 图的父级盒子必须有宽高）

效果图：

四：如果想要其他图，比如饼图：

一、点击进入echarts官网

二、进行如下操作即可

【Echarts系列】Vue2项目如何引入echarts相关推荐

最新文章

热门文章

`npm install echarts --save`

三、在vue文件中使用: `（注：挂载 echarts 图的父级盒子必须有宽高）`

四：`如果想要其他图，比如饼图：`