【echarts】折线图属性设置

wanghong1994 2020-10-26 原文

【echarts】折线图属性设置

<!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>