vue使用echarts实现折线图
更新时间：2022年03月21日 15:56:39 作者：面向对象、
这篇文章主要为大家详细介绍了vue使用echarts实现折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue使用echarts实现折线图的具体代码，供大家参考，具体内容如下
效果图：
代码：
<template>
<div class="proCharts" ref='charts'>
</div>
</template>
<script>
import echarts from 'echarts' //npm install echarts@4.9.0
export default {
data () {
return {
option:{
color:['rgb(8,252,7)','rgb(255,168,0)',],
title: {
text: ''
},
tooltip: { //提示框
trigger: 'axis',
},
legend: {//图例的类型
icon:'roundRect',//图例icon图标
data: [
{
name:"上年",
textStyle: {
color: '#fff'
}
},{
name:"本年",
textStyle: {
color: '#fff'
}
},
],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top:'17%',
containLabel: true //grid区域是否包含坐标轴的刻度标签
},
xAxis: {
type: 'category', //坐标轴类型。
boundaryGap: false, //坐标轴两边留白策略
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
axisLabel: {//坐标轴刻度标签的相关设置
interval:0,
textStyle: {
color: '#fff',
fontSize :10
},
},
axisLine:{//坐标轴轴线相关设置
show :true,
lineStyle:{
color:'rgb(2,121,253)'
}
},
axisTick:{ //坐标轴刻度相关设置。
show :false,
}
},
yAxis: {
type: 'value',
axisLabel: { //x轴的坐标文字
show: true,
textStyle: {
color: '#fff' //文字的颜色
},
},
max:100,//最大值100
axisLine:{//坐标轴轴线相关设置
show :true,
lineStyle:{
color:'rgb(2,121,253)'
}
},
axisTick:{ //坐标轴刻度相关设置。
show :false,
},
splitLine:{ //坐标在grid区域的分割线
lineStyle: { //设置分割线的样式(图表横线颜色)
color: ['#153a8a']
}
}
},
series: [
{
name: '上年',
type: 'line',
data: [10,20,30,50,50,10,50,60,10,50,10,30],
lineStyle:{
color:'rgb(8,252,7)' //线的颜色
}
},
{
name: '本年',
type: 'line',
data: [20,20,30,50,50,10,50,20,30,50,50,30],
lineStyle:{
color:'rgb(255,168,0)' //线的颜色
}
}
]
}
}
},
created () {
},
mounted () {
this.mycharts()
},
methods: {
mycharts(){
let myChart =echarts.init(this.$refs.charts,"macarons");
myChart.setOption(this.option)
//图表自适应
window.addEventListener("resize",function(){
myChart.resize() // myChart 是实例对象
})
}
}
}
</script>
<style scoped>
.proCharts{
width: 100%;
height: 400px;
background: rgb(14, 51, 129);
}
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
这篇文章主要介绍了vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了vue-pdf如何通过文件流预览pdf文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了多个vue项目复用一个node_modules的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
在不久之前,看到一个比较有意思的小程序,就是静神木鱼,可以实现在线敲木鱼,自动敲木鱼,手盘佛珠,静心颂钵的，下面就来揭秘如何实现这个小程序中敲木鱼的累加向上漂浮动画，需要的可以参考一下2022-11-11
在vue中会将常用的组件进行封装,下面这篇文章主要给大家介绍了关于Vue组件封装之input输入框的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue 修改vant自带的样式过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vuex的mapGetters无效原因及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
所谓祖孙组件,也就是3层嵌套的组件,下面这篇文章主要给大家介绍了关于VUE中如何优雅实现爷孙组件的数据通信的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了vue下拉刷新组件的开发及slot的使用详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
同大多数的前端框架一样，先读官网的使用方法。学会基本使用后，在实例中找到自己想要demo。拿过来改一改，一个echarts图表就形成，毕竟人家做就是为了方便使用，这篇文章主要介绍了Vue Echarts实现实时大屏动态数据显示2022-10-10
最新评论