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.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 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
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
php文件上传表单摘自drupal的代码
2011/02/15 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
浅谈php7的重大新特性
2015/10/23 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
浅谈Python实现Apriori算法介绍
2017/12/20 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
党员批评与自我批评
2014/02/12 职场文书
创新型城市实施方案
2014/03/06 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
理财计划书
2014/08/14 职场文书
四查四看整改措施
2014/09/19 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
副总经理岗位职责
2015/02/02 职场文书
初中教师个人工作总结
2015/02/10 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis