电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

在vue中使用echarts(折線圖的demo,markline用法)

瀏覽:4日期:2023-01-02 17:39:42

公司最近在用vue開發(fā)項目,項目接近尾聲了,趁休息時間寫點demo——

vue引入echarts(折線圖的demo)

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

這是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: ’未來一周氣溫變化’,//感覺頭部有點亂,沒使用自帶的標(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è)置折線折點的顏色 normal : { color:’#3f89ec’ } } }, { name:’最高氣溫’, type:’line’, data:[9,10,6,7,12,11,8], lineStyle:{//設(shè)置折線色顏色 color:’black’ }, itemStyle:{//設(shè)置折線折點的顏色 normal : { color:’black’ } } }, { name:’平行于y軸的趨勢線’, 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: ’: {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é)束,本人目前還是前端的小白,如有錯誤歡迎指正,以后會不定期更新喲!

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

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

// stack: ‘總量’, //此處注釋掉 這個問題 就解決了 所有的都要注釋掉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ù) }]

如果還有什么問題,大家留言一起討論。

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

標(biāo)簽: Vue
主站蜘蛛池模板: 耐力板-PC阳光板-PC板-PC耐力板 - 嘉兴赢创实业有限公司 | 河南新乡德诚生产厂家主营震动筛,振动筛设备,筛机,塑料震动筛选机 | 广州市哲铭油墨涂料有限公司,水性漆生产研发基地| 威客电竞(vk·game)·电子竞技赛事官网 | 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库 | 手持气象站_便携式气象站_农业气象站_负氧离子监测站-山东万象环境 | 低气压试验箱_高低温低气压试验箱_低气压实验箱 |林频试验设备品牌 | 吸音板,隔音板,吸音材料,吸音板价格,声学材料 - 佛山诺声吸音板厂家 | 皮带输送机-大倾角皮带输送机-皮带输送机厂家-河南坤威机械 | 油冷式_微型_TDY电动滚筒_外装_外置式电动滚筒厂家-淄博秉泓机械有限公司 | 安徽合肥项目申报咨询公司_安徽合肥高新企业项目申报_安徽省科技项目申报代理 | 铝合金风口-玻璃钢轴流风机-玻璃钢屋顶风机-德州东润空调设备有限公司 | 水性漆|墙面漆|木器家具漆|水漆涂料_晨阳水漆官网 | SRRC认证|CCC认证|CTA申请_IMEI|MAC地址注册-英利检测 | 武汉印刷厂-不干胶标签印刷厂-武汉不干胶印刷-武汉标签印刷厂-武汉标签制作 - 善进特种标签印刷厂 | 楼梯定制_楼梯设计施工厂家_楼梯扶手安装制作-北京凌步楼梯 | 高低温万能试验机_拉力试验机_拉伸试验机-馥勒仪器科技(上海)有限公司 | Duoguan 夺冠集团| 不锈钢闸阀_球阀_蝶阀_止回阀_调节阀_截止阀-可拉伐阀门(上海)有限公司 | 镀锌钢格栅_热镀锌格栅板_钢格栅板_热镀锌钢格板-安平县昊泽丝网制品有限公司 | 钢衬四氟管道_钢衬四氟直管_聚四氟乙烯衬里管件_聚四氟乙烯衬里管道-沧州汇霖管道科技有限公司 | 京港视通报道-质量走进大江南北-京港视通传媒[北京]有限公司 | 紫外可见光分光度计-紫外分光度计-分光光度仪-屹谱仪器制造(上海)有限公司 | 宝元数控系统|对刀仪厂家|东莞机器人控制系统|东莞安川伺服-【鑫天驰智能科技】 | 固诺家居-全屋定制十大品牌_整体衣柜木门橱柜招商加盟 | 细石混凝土泵_厂家_价格-烟台九达机械有限公司 | 卧涛科技有限公司科技项目申报公司|高新技术企业申报|专利申请 | 蔬菜清洗机_环速洗菜机_异物去除清洗机_蔬菜清洗机_商用洗菜机 - 环速科技有限公司 | 法兰连接型电磁流量计-蒸汽孔板节流装置流量计-北京凯安达仪器仪表有限公司 | bng防爆挠性连接管-定做金属防爆挠性管-依客思防爆科技 | 煤矿支护网片_矿用勾花菱形网_缝管式_管缝式锚杆-邯郸市永年区志涛工矿配件有限公司 | 卓能JOINTLEAN端子连接器厂家-专业提供PCB接线端子|轨道式端子|重载连接器|欧式连接器等电气连接产品和服务 | 招商帮-一站式网络营销服务|互联网整合营销|网络推广代运营|信息流推广|招商帮企业招商好帮手|搜索营销推广|短视视频营销推广 | B2B网站_B2B免费发布信息网站_B2B企业贸易平台 - 企资网 | 赛默飞Thermo veritiproPCR仪|ProFlex3 x 32PCR系统|Countess3细胞计数仪|371|3111二氧化碳培养箱|Mirco17R|Mirco21R离心机|仟诺生物 | 短信通106短信接口验证码接口群发平台_国际短信接口验证码接口群发平台-速度网络有限公司 | 包装机传感器-搅拌站传感器-山东称重传感器厂家-济南泰钦电气 | 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 聚合氯化铝_喷雾聚氯化铝_聚合氯化铝铁厂家_郑州亿升化工有限公司 | 杭州月嫂技术培训服务公司-催乳师培训中心报名费用-产后康复师培训机构-杭州优贝姆健康管理有限公司 | 蔬菜配送公司|蔬菜配送中心|食材配送|饭堂配送|食堂配送-首宏公司 | 福建自考_福建自学考试网 |