在vue中使用echarts(折线图的demo,markline用法)
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要介绍了在vue中使用echarts(折线图的demo,markline用法),具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
公司最近在用vue开发项目,项目接近尾声了,趁休息时间写点demo——
vue引入echarts(折线图的demo)
主要是解决引入echarts,markline的使用(基准线)
这是demo的效果图:
vue脚手架不多赘述
1.安装依赖
pm install echarts -S
2.在main.js中引入echarts
import echarts from 'echarts'
3.在main.js中安装
Vue.prototype.echarts = echarts;
一般来说能正常挂载上组件,就可以在页面中正常使用了
废话不多说上代码(因为自己也是小白阶段所以写的注释多了点,以便以后使用)
1.HTML部分
<template> <div class="content"> <p class="prompt_p"> 近七天温度折线图</p> <div class="seven_echarts" id="seven"> </div> </div> </template>
2.js部分
<script type="text/javascript"> export default{ data(){ return{ seven_chart:null, month_chart:null, seven_option : { title : { // text: '未来一周气温变化',//感觉头部有点乱,没使用自带的标题 // subtext: '纯属虚构' x: 'left', align: 'center' }, tooltip: { trigger: 'axis' }, legend: { data:['最高气温','最低气温',] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { magicType: {type: ['line', 'bar']},//柱状图和西和折线图切换 restore: {},//刷新 saveAsImage: {},//将图表以折线图的形式展现 } }, xAxis: { type: 'category', boundaryGap: false, data: ["11-26","11-27","11-28","11-29","11-30","12-01","12-02"] }, yAxis: { name:"℃", nameLocation: 'end', type: 'value', axisLabel: { formatter: '{value} ' } }, series: [ { name:'最低气温', type:'line', data:[0,-1,-3,-4,0,-2,-4], lineStyle:{//设置折线色颜色 color:'#3f89ec' }, itemStyle:{//设置折线折点的颜色 normal : { color:'#3f89ec' } } }, { name:'最高气温', type:'line', data:[9,10,6,7,12,11,8], lineStyle:{//设置折线色颜色 color:'black' }, itemStyle:{//设置折线折点的颜色 normal : { color:'black' } } }, { name:'平行于y轴的趋势线', type:'line', markLine: { name:'aa', data: [ { name: '0℃标准线', yAxis: 0, lineStyle:{//设置折线色颜色 color:'red' }, }, ], symbol: ['arrow', 'none'],//将箭头向左 默认值是向右的 label:{ show:true, position:'middle',//markline描述位于中间 right,left,middle formatter: '{b}: {c}',//显示name中的描述 } } } ], }, } }, mounted:function (){ this.get_echarts(); }, methods:{ get_echarts:function(){ this.seven_chart = this.echarts.init(document.getElementById("seven")); // 把配置和数据放这里 this.seven_chart.setOption(this.seven_option) } }, beforeDestroy() { if (!this.seven_chart) { return } this.seven_chart.dispose(); this.seven_chart = null; }, } </script>
3.css部分
<style type="text/css"> .content{ width: 100%; } .content p{ margin-: 1rem; font-size: 0.4rem; color: #666666; } .seven_echarts{ height: 11rem; width: 94%; } </style>
好了结束,本人目前还是前端的小白,如有错误欢迎指正,以后会不定期更新哟!
补充知识:Echarts中有多条曲线,数据精度为小数时,画线部分与小数刻度显示不准确
最近遇到了一个问题就是 多条曲线,数据精度为小数时,画线部分与小数刻度显示不怎么准确,但是单条曲线的时候就没问题
// stack: ‘总量', //此处注释掉 这个问题 就解决了 所有的都要注释掉 series: [ { name: 'line1', type: 'line', // stack: '总量', //此处注释掉 data: this.lineData.series[0].data //data中包含带有小数的数据 }, { name: 'line2', type: 'line', // stack: '总量', //此处注释掉 data: this.lineData.series[1].data //data中包含带有小数的数据 } ]
如果还有什么问题,大家留言一起讨论。
以上这篇在vue中使用echarts(折线图的demo,markline用法)就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
上一篇:jquery实现简单拖拽效果
下一篇:微信小程序实现时间戳格式转换
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程