【echarts】折線圖屬性設置

本文轉載自查看原文 2020-10-26 17:10 412 前端/H5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一個 ECharts 實例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基於准備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定圖表的配置項和數據
    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLine :{
                lineStyle:{
                    color:'#912CEE'
                }
            }
        },
        yAxis: {
            type: 'value',

             axisLine :{
                lineStyle:{
                    color:'#87CEFA'
                }
            }
        },

        title: {
            text: '折線圖',
            subtext: '模擬數據',
            x: 'center'
        },

        tooltip: {
            trigger: 'axis'
        },


        //工具框，可以選擇
        toolbox: {
            feature: {
                saveAsImage: {} //下載工具
            }
        },

        legend: {
          // orient 設置布局方式，默認水平布局，可選值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: 'horizontal',
          // x 設置水平安放位置，默認全圖居中，可選值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐標，單位px）
          x: 'left',
          // y 設置垂直安放位置，默認全圖頂端，可選值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐標，單位px）
          y: 'top',
          data: ['現價','原價']
        },





        series: [
            // 1:
            {
                name:"現價",
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                symbol: 'circle',
                itemStyle: {

                    normal: {
                        label : {
                            show: true
                        }
                    },
                    lineStyle:{
                  // 使用rgba設置折線透明度為0，可以視覺上隱藏折線
                  color: 'rgba(0,0,0,0)'
                }

                }
            } ,


            // 2:
            {
                name:"原價",
                data: [444, 567, 890, 211, 4322, 532, 4356],
                type: 'line',
                color:"#36ee4f",
                symbol: 'circle',
                itemStyle: {

                    normal: {
                        label : {
                            show: true
                        }
                    },
                    lineStyle:{
                  // 使用rgba設置折線透明度為0，可以視覺上隱藏折線
                  color: 'rgba(0,0,0,0)'
                }

                }
            }

        ]
    };


    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);
</script>
</body>
</html>

免責聲明！

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

猜您在找 Echarts折線圖屬性設置大全 Echarts折線圖屬性設置大全 Echarts折線圖屬性設置大全 echarts相關屬性設置（1）折線圖篇 echarts折線圖陰影設置 echarts設置折線圖多顏色 echarts折線圖 echarts 折線圖 echarts折線圖 echarts相關屬性設置（2）--折線圖和柱狀圖的結合使用