Echarts折線圖--心率需求

本文轉載自查看原文 2019-10-16 08:44 603 echarts-圖表

安裝echarts

安裝Echarts

直接使用npm進行安裝。

1	`npm install Echarts --save`

npm install –save:
會把webpack包安裝到node_modules目錄中
會在package.json的dependencies屬性下添加webpack
之后運行npm install命令時，會自動安裝webpack到node_modules目錄中
之后運行npm install –production或者注明NODE_ENV變量值為production時，會自動安裝webpack到node_modules目錄中

npm install –save-dev:
會把webpack包安裝到node_modules目錄中
會在package.json的devDependencies屬性下添加webpack
之后運行npm install命令時，會自動安裝webpack到node_modules目錄中
之后運行npm install –production或者注明NODE_ENV變量值為production時，不會自動安裝msbuild到node_modules目錄中

總結:

devDependencies 節點下的模塊是我們在開發時需要用的，比如項目中使用的 gulp ，壓縮css、js的模塊。這些模塊在我們的項目部署后是不需要的，所以我們可以使用 -save-dev 的形式安裝。像 express 這些模塊是項目運行必備的，應該安裝在 dependencies 節點下，所以我們應該使用 -save 的形式安裝。

引入Echarts

//在main.js加入下面兩行代碼
import echarts from 'echarts'
Vue.prototype.$echarts = echarts //將echarts注冊成Vue的全局屬性

<template>
   <div id="myChart" class="notfound"></div> 
</template>
<script>
var data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];
var dateList = data.map(function (item) {
    return item[0];
});
var valueList = data.map(function (item) {
    return item[1];
});
export default {
  name: 'zheixnatu',
  data () {
    return {
    }
  },
  mounted(){
    this.drawLine();
  },
   methods: {
    drawLine(){
        // 基於准備好的dom，初始化echarts實例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 繪制圖表
        myChart.setOption({
             // Make gradient line here
            backgroundColor: ['#081944'], // 全圖默認背景
            grid: [{
                bottom: '60%'
            }, {
                top: '60%'
            }, {
                show: true,
                borderWidth: 1,
                borderColor: '#FF0000' // 網格的邊框顏色
            }],
            // 視覺映射組件，用於進行『視覺編碼』
            visualMap: [{
                show: false, // 是否顯示 visualMap-piecewise 組件。如果設置為 false，不會顯示，但是數據映射的功能還存在。
                type: 'continuous', // 定義為連續型 visualMap
                seriesIndex: 0, // 指定取哪個系列的數據，即哪個系列的 series.data。默認取所有系列
                min: 0, // 指定 visualMapPiecewise 組件的最小值。
                max: 400
            }, {
                show: false,
                type: 'continuous',
                seriesIndex: 1,
                dimension: 0,
                min: 0,
                max: dateList.length - 1
            }],
            title: [{
                left: 'center',
                text: 'Gradient along the y axis'
            }, {
                top: '55%',
                left: 'center',
                text: 'Gradient along the x axis'
            }],
            // 提示框組件
            tooltip: {
                trigger: 'axis' // 觸發類型。坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用/none什么都不觸發
            },
            xAxis: [{
                data: dateList,
                show: false //是否顯示x軸
            }, {
                data: dateList,
                gridIndex: 1 // x 軸所在的 grid 的索引，默認位於第一個 grid。
            }],
            yAxis: [{
                nameTextStyle: { // 坐標軸名稱的文字樣式。
                    color: '#63B8FF',
                    fontWeight:'bold', // 坐標軸名稱文字字體的粗細
                    fontSize: 15
                },
                name: '心率次數',
                splitLine: {
                    show: true, // x軸、y軸顯示網格線,坐標軸在 grid 區域中的分隔線
                    lineStyle:{
                         // 使用深淺的間隔色--分隔線顏色，可以設置成單個顏色。也可以設置成顏色數組，分隔線會按數組中顏色的順序依次循環設置顏色。
                        color: ['#FF0000', '#BCEE68']
                    }
                }
            }, {
                splitLine: {show: false},
                gridIndex: 1
            }],
            // 系列列表。每個系列通過 type 決定自己的圖表類型
            series: [{
                type: 'line', // 線條
                showSymbol: false, // 是否顯示 symbol符號, 如果 false 則只有在 tooltip hover 的時候顯示。
                data: valueList
            }, {
                type: 'line',
                showSymbol: false,
                data: valueList,
                xAxisIndex: 1,
                yAxisIndex: 1
            }]
        });
    }
  }
}
</script>
<style scoped>
.notfound{
    width: 800px;
    height: 800px;
}
</style>

<template>
   <div id="myChart" class="notfound"></div> 
</template>
<script>
var data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];
var dateList = data.map(function (item) {
    return item[0];
});
var valueList = data.map(function (item) {
    return item[1];
});
export default {
  name: 'zheixnatu',
  data () {
    return {
    }
  },
  mounted(){
    this.drawLine();
  },
   methods: {
    drawLine(){
        // 基於准備好的dom，初始化echarts實例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 繪制圖表
        myChart.setOption({
             // Make gradient line here
            backgroundColor: ['#081944'], // 全圖默認背景
            grid: [{
                bottom: '60%'
            }, {
                top: '60%'
            }, {
                show: false,
                borderWidth: 1,
                // borderColor: '#FF0000' // 網格的邊框顏色
            }],
            // 視覺映射組件，用於進行『視覺編碼』
            visualMap: [{
                show: false, // 是否顯示 visualMap-piecewise 組件。如果設置為 false，不會顯示，但是數據映射的功能還存在。
                type: 'continuous', // 定義為連續型 visualMap
                seriesIndex: 0, // 指定取哪個系列的數據，即哪個系列的 series.data。默認取所有系列
                min: 0, // 指定 visualMapPiecewise 組件的最小值。
                max: 400
            }, {
                show: false,
                type: 'continuous',
                seriesIndex: 1,
                dimension: 0,
                min: 0,
                max: dateList.length - 1
            }],
            title: [{
                left: 'center',
                text: 'Gradient along the y axis'
            }, {
                top: '55%',
                left: 'center',
                text: 'Gradient along the x axis'
            }],
            // 提示框組件
            tooltip: {
                trigger: 'axis' // 觸發類型。坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用/none什么都不觸發
            },
            xAxis: [{
                data: dateList,
                show: true //是否顯示x軸
            }, {
                data: dateList,
                gridIndex: 1 // x 軸所在的 grid 的索引，默認位於第一個 grid。
            }],
            yAxis: [{
                nameTextStyle: { // 坐標軸名稱的文字樣式。
                    color: '#63B8FF',
                    fontWeight:'bold', // 坐標軸名稱文字字體的粗細
                    fontSize: 15
                },
                name: '心率次數/bmp',
                splitLine: {
                    show: true, // x軸、y軸顯示網格線,坐標軸在 grid 區域中的分隔線
                    lineStyle:{
                         // 使用深淺的間隔色--分隔線顏色，可以設置成單個顏色。也可以設置成顏色數組，分隔線會按數組中顏色的順序依次循環設置顏色。
                        color: ['#4F5258', '#30394F']
                    }
                }
            }, {
                splitLine: {show: false},
                gridIndex: 1
            }],
            // 系列列表。每個系列通過 type 決定自己的圖表類型
            series: [{
                type: 'line', // 線條
                showSymbol: false, // 是否顯示 symbol符號, 如果 false 則只有在 tooltip hover 的時候顯示。
                data: valueList,
                lineStyle: {color: '#BA3945'}, // 線條樣式
                markPoint: { // 圖表標注
                    data: [
                        {
                            type: 'max', 
                            name: '最高心率',
                            label: {
                                color: '#CCCCCC',
                                show: true,
                            }
                        },
                        {
                            type: 'min',
                            name: '最小心率',
                            label: {
                                color: '#CCCCCC',
                                show: true,
                                position: 'bottom',
                            },
                            symbolSize: [5, 5] // 標記的大小，可以設置成諸如 10 這樣單一的數字，也可以用數組分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
                        }
                    ],
                    // symbol: 'none', // 標記的圖形。circle-圓形,rect-方形
                    label: { // 標注的文本
                        show: true
                    },
                    itemStyle: {
                        color: '#081944', // 圖形的顏色--設置這個是為了隱藏掉圖標
                        opacity: 1 // 圖形透明度。支持從 0 到 1 的數字，為 0 時不繪制該圖形。
                    }
                }
            }, {
                type: 'line',
                showSymbol: false,
                data: valueList,
                xAxisIndex: 1,
                yAxisIndex: 1
            }]
        });
    }
  }
}
</script>
<style scoped>
.notfound{
    width: 800px;
    height: 800px;
}
</style>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 echarts折線圖 echarts 折線圖 echarts折線圖 echarts實現折線圖 Echarts 動態折線圖 ECharts使用—折線圖動態加載 Echarts折線圖屬性設置大全 echarts 實時動態折線圖（vue）【echarts】折線圖屬性設置 echarts 折線圖陰影顏色漸變