在vue中使用echarts(折线图的demo,markline用法)

公司最近在用vue开发项目，项目接近尾声了，趁休息时间写点demo——

vue引入echarts（折线图的demo）

主要是解决引入echarts，markline的使用（基准线）

这是demo的效果图：

vue脚手架不多赘述

1.安装依赖

cnpm 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'>&nbsp;&nbsp;&nbsp;近七天温度折线图</p> <div 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-top: 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用法)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。