vue使用echarts实现折线图


Posted in Vue.js onMarch 21, 2022

本文实例为大家分享了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.js 相关文章推荐
vue+iview分页组件的封装
Nov 17 Vue.js
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
浅谈Vue的computed计算属性
VUE中的v-if与v-show区别介绍
Mar 13 #Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 #Vue.js
Vue2.0搭建脚手架
Vue.js中v-for指令的用法介绍
Mar 13 #Vue.js
Vue如何清空对象
Mar 03 #Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 #Vue.js
You might like
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
用PHP调用Oracle存储过程
2006/10/09 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
php分页函数完整实例代码
2014/09/22 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
jquery 常用操作方法
2010/01/28 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
Python中调用其他程序的方式详解
2019/08/06 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
python实现简单井字棋小游戏
2020/03/05 Python
python实现图像拼接
2020/03/05 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
英语专业职业生涯规划范文
2014/03/05 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
个人廉政承诺书
2015/04/28 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android