vue+echart實現(xiàn)圓滑折線圖

更新時間：2022年04月02日 11:12:42 作者：前端菜雞日常

這篇文章主要為大家詳細介紹了vue+echart實現(xiàn)圓滑折線圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue+echart實現(xiàn)圓滑折線圖的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

安裝依賴：

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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: