公司最近在用vue開(kāi)發(fā)項(xiàng)目，項(xiàng)目接近尾聲了，趁休息時(shí)間寫(xiě)點(diǎn)demo——

vue引入echarts（折線圖的demo）

主要是解決引入echarts，markline的使用（基準(zhǔn)線）

這是demo的效果圖：

vue腳手架不多贅述

1.安裝依賴(lài)

cnpm install echarts -S

2.在main.js中引入echarts

import echarts from ’echarts’

3.在main.js中安裝

Vue.prototype.echarts = echarts;

一般來(lái)說(shuō)能正常掛載上組件，就可以在頁(yè)面中正常使用了

廢話不多說(shuō)上代碼（因?yàn)樽约阂彩切“纂A段所以寫(xiě)的注釋多了點(diǎn)，以便以后使用）

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: ’未來(lái)一周氣溫變化’,//感覺(jué)頭部有點(diǎn)亂，沒(méi)使用自帶的標(biāo)題 // subtext: ’純屬虛構(gòu)’ 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: {},//將圖表以折線圖的形式展現(xiàn) } }, 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:{//設(shè)置折線色顏色 color:’#3f89ec’ }, itemStyle:{//設(shè)置折線折點(diǎn)的顏色 normal : { color:’#3f89ec’ } } }, { name:’最高氣溫’, type:’line’, data:[9,10,6,7,12,11,8], lineStyle:{//設(shè)置折線色顏色 color:’black’ }, itemStyle:{//設(shè)置折線折點(diǎn)的顏色 normal : { color:’black’ } } }, { name:’平行于y軸的趨勢(shì)線’, type:’line’, markLine: { name:’aa’, data: [ { name: ’0℃標(biāo)準(zhǔn)線’, yAxis: 0, lineStyle:{//設(shè)置折線色顏色 color:’red’ }, }, ], symbol: [’arrow’, ’none’],//將箭頭向左 默認(rèn)值是向右的 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'));// 把配置和數(shù)據(jù)放這里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>

好了結(jié)束，本人目前還是前端的小白，如有錯(cuò)誤歡迎指正，以后會(huì)不定期更新喲！

補(bǔ)充知識(shí)：Echarts中有多條曲線，數(shù)據(jù)精度為小數(shù)時(shí)，畫(huà)線部分與小數(shù)刻度顯示不準(zhǔn)確

最近遇到了一個(gè)問(wèn)題就是 多條曲線，數(shù)據(jù)精度為小數(shù)時(shí)，畫(huà)線部分與小數(shù)刻度顯示不怎么準(zhǔn)確，但是單條曲線的時(shí)候就沒(méi)問(wèn)題

// stack: ‘總量’, //此處注釋掉 這個(gè)問(wèn)題 就解決了 所有的都要注釋掉series: [ { name: ’line1’, type: ’line’, // stack: ’總量’, //此處注釋掉 data: this.lineData.series[0].data //data中包含帶有小數(shù)的數(shù)據(jù) }, { name: ’line2’, type: ’line’, // stack: ’總量’, //此處注釋掉 data: this.lineData.series[1].data //data中包含帶有小數(shù)的數(shù)據(jù) }]

如果還有什么問(wèn)題，大家留言一起討論。

以上這篇在vue中使用echarts(折線圖的demo,markline用法)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。