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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Element Plus的el-tree-select组件懒加载+数据回显详解
el-tree-select组件是el-tree和el-select的结合体,他们的原始属性未被更改,下面这篇文章主要给大家介绍了关于Element Plus的el-tree-select组件懒加载+数据回显的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue中改变滚动条样式的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
vue3.0+vue-router+element-plus初实践
这篇文章主要介绍了vue3.0+vue-router+element-plus初实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
vue3使用useMouseInElement实现图片局部放大预览效果实例代码
现在很多的项目里面图片展示缩略图,然后点击实现图片预览,放大的功能,下面这篇文章主要给大家介绍了关于vue3使用useMouseInElement实现图片局部放大预览效果的相关资料,需要的朋友可以参考下2023-03-03
Vue-router优化import引入过多导致index文件臃肿问题
这篇文章主要为大家介绍了Vue-router优化import引入过多导致index文件臃肿问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
最近参与了公司一个新的B端项目的研发,从无到有搭建项目的过程中,遇到了关于项目鉴权的问题,这篇文章主要给大家介绍了关于如何使用Vuex实现Vue后台管理中的角色鉴权的相关资料,需要的朋友可以参考下2022-05-05
普遍存在于各种app中的上拉加载下拉刷新功能，本文主要介绍了vue基于vant实现上拉加载下拉刷新，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要介绍了Vuex总体案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
关于pinia的使用和持久化方式(pinia-plugin-persistedstate)
本文介绍了Pinia的使用方法,包括安装和配置插件pinia-plugin-persistedstate,以及在项目中创建和使用Store模块,同时,还讲解了Pinia的state、getters和actions的使用,并提供了在uniapp中使用持久化插件的总结2025-02-02
这篇文章主要介绍了Vue.js实现可排序的表格组件功能,涉及vue.js事件响应、元素动态操作、排序、运算等相关操作技巧,需要的朋友可以参考下2019-02-02
最新评论