在vue中使用echart图表全过程
更新时间：2026年04月23日 09:11:34 作者：前端探险家
文章主要介绍了在Vue项目中使用ECharts的步骤,包括安装ECharts、在webpack中引入和打包ECharts,并提供了具体的文件操作和引入方法,此外,还提到了ECharts官网的详细使用步骤
先上效果图
以上都是在项目中经常使用到的图标，地图的引入在4.x版本，下载的安装包有地图的json文件，要另外引入，但是在5.x版本，安装包里去掉了地图json文件，我们需要去网站下载好之后放到项目中，在引入使用，后面我也会在写一篇关于地图的使用！
echarts中文官网
官网链接点击查看：ECharts
其实官网中有在项目中使用的详细步骤，大家也可以通过对官网的学习来使用echarts,毕竟人家比比我介绍的更详细更专业。
echarts在vue项目中实现的步骤
webpack 是目前比较流行的模块打包工具，你可以在使用 webpack 的项目中轻松的引入和打包 ECharts，这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。
第一步：先安装echarts
// npm安装echarts npm install echarts --save
或者
// 先安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org // cnpm安装echarts cnpm install echarts -S
第二步：在需要的组件中使用echart
个人喜欢把echart.vue单独封装起来，方便使用和复用。先创建一个chartLint.vue文件;
chartLint.vue文件：
<template>
<div id="echart-line" :style="{width: '100%', height: '100%'}"></div>
</template>
<script>
import echarts from "echarts";
export default {
methods:{
initChart(name,xData,yData) {
let getchart = echarts.init(document.getElementById('echart-line'));
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: [name],
bottom:'0%'
},
grid: { //调整图表上下左右位置
top:'10%',
left: '3%',
right: '8%',
bottom: '11%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xData
},
yAxis: {
type: 'value'
},
series: [
{
name: name,
type: 'line',
stack: '总量',
data: yData
},
]
};
getchart.setOption(option);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
getchart.resize();
});
},
}
}
</script>
在需要的组件中引入即可：
<template>
<div class="analysisTask">
<ChartLine ref="chart_line_one"/>
</div>
</template>
<script>
import ChartLine from './partChart/chartLine.vue'
export default{
data(){
return{
name:'张雪',
xData: ['2020-02', '2020-03', '2020-04', '2020-05'],
yData: [30, 132, 80, 134],
}
},
mounted () {
const {name,xData,yData} = this
console.log(this.$refs)
this.$refs.chart_line_one.initChart(name,xData,yData)
},
components: {
ChartLine,
}
}
</script>
这样就显示出来啦！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在本篇文章里小编给大家整理的是一篇关于Vue+ElementUI怎么处理超大表单实例讲解内容，以后需要的朋友可以跟着学习参考下。2021-11-11
Vue利用computed配合watch实现监听多个属性的变化
这篇文章主要给大家介绍了在Vue中巧用computed配合watch实现监听多个属性的变化的方法,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了使用ElementUI修改el-tabs标签页组件样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
在Vue3项目中需要频繁使用某一个方法,配置到全局感觉会方便很多,这篇文章主要给大家介绍了关于Vue3使用全局函数或变量的2种常用方式,需要的朋友可以参考下2023-09-09
这篇文章主要为大家介绍了vue LogicFlow自定义边示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
不断把公共的、可以独立拆分出来的抽出来作为一个独立可复用的组件来向上提供调用,这样让我们的代码更加方便组织和管理,并且扩展性也更强,下面这篇文章主要给大家介绍了关于vue3组件化开发之可复用性应用的相关资料,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue使用Element el-upload 组件的相关知识，在研究学习基本使用的过程中遇到很多问题，今天特此把问题记录分享到脚本之家平台,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了浅析Proxy可以优化vue的数据监听机制问题及实现思路,需要的朋友可以参考下2018-11-11
本文给大家介绍利用Vue实现tab导航栏，并且通过flex布局实现左右滑动效果，通过代码给大家分享tab导航栏布局的实现，本文给大家展示了完整代码，需要的朋友参考下吧2021-06-06
这篇文章主要介绍了使用Vue逐步实现Watch属性详解，watch对象中的value分别支持函数、数组、字符串、对象，较为常用的是函数的方式，当想要观察一个对象以及对象中的每一个属性的变化时，便会用到对象的方式2022-08-08
最新评论