您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue+echart怎么實現(xiàn)圓滑折線圖的相關(guān)知識,內(nèi)容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇vue+echart怎么實現(xiàn)圓滑折線圖文章都會有所收獲,下面我們一起來看看吧。
效果圖:
安裝依賴:
npm install echarts --save import echarts from "echarts";
完整代碼:
<template> <div> <div id="demo"></div> </div> </template> <script> export default { data() { return { option: { title: { text: "走勢圖", //標題設(shè)置‘參保情況' // subtext: "純屬虛構(gòu)", left: "center", //標題位置 }, tooltip: { //鼠標hover覆蓋提示框 trigger: "axis", //坐標線提示 // trigger: "item", //根據(jù)item提示信息 // formatter: " : {c} ", //提示內(nèi)容 axisPointer: { type: "cross", label: { backgroundColor: "#6a7985", }, }, }, legend: { bottom: "5%", data: ["第一項", "第二項"], }, xAxis: { axisTick: { show: false, //不顯示坐標軸刻度線 }, axisLine: { show: false, //不顯示坐標軸線 }, type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], boundaryGap: false, //與x軸無縫隙 }, yAxis: { axisTick: { show: false, //不顯示坐標軸刻度線 }, axisLine: { show: false, //不顯示坐標軸線 }, type: "value", // splitLine: { // show: false, //不顯示網(wǎng)格線 // }, }, grid: { left: "5%", right: "5%", bottom: "20%", containLabel: true, }, series: [ { name: "第一項", //設(shè)置名稱,跟數(shù)據(jù)無相關(guān)性 hoverAnimation: true, //鼠標懸停效果,默認是true data: [ { value: 335, name: "設(shè)備1" }, { value: 335, name: "設(shè)備1" }, { value: 310, name: "設(shè)備2" }, { value: 234, name: "設(shè)備3" }, { value: 135, name: "設(shè)備4" }, { value: 1548, name: "設(shè)備5" }, { value: 135, name: "設(shè)備4" }, { value: 1548, name: "設(shè)備5" }, ], type: "line", // 區(qū)域有背景 areaStyle: { //color: "#1ADA6F", }, smooth: true, }, { name: "第二項", data: [220, 222, 333, 222, 444, 222, 444], type: "line", areaStyle: {}, smooth: true, }, ], }, }; }, mounted() { // 這個方法不能放在greated生命周期,因為那時候dom還沒初始化完成 this.echarts(); }, methods: { echarts() { // 引入 ECharts 主模塊 var echarts = require("echarts/lib/echarts"); // 引入柱狀圖(這個例子可以去掉) require("echarts/lib/chart/bar"); // 引入提示框和標題組件 require("echarts/lib/component/tooltip"); require("echarts/lib/component/title"); // 基于準備好的dom,初始化echarts實例 var myChart1 = echarts.init(document.getElementById("demo")); // 繪制餅圖 myChart1.setOption(this.option); // 繪制折線圖 }, }, }; </script> <style lang="scss"> #demo { width: 500px; height: 300px; } </style>
關(guān)于“vue+echart怎么實現(xiàn)圓滑折線圖”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“vue+echart怎么實現(xiàn)圓滑折線圖”知識都有一定的了解,大家如果還想學習更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。