echarts entry stacked line chart

renderings

Move the mouse over the line chart to display only the current information

tooltip : {
    show: true,
    trigger: 'item'
 },

Move the mouse over the line chart to display all information

tooltip : {
    show: true,
    trigger: 'item'
    trigger: 'axis',
    axisPointer: {
        type: 'cross',
        label: {
            backgroundColor: '#6a7985'
        }
    }
},

The core of the crosshair indicator is to change the type of the tooltip to cross. If you want to change the color of the crosshair indicator, use crossStyle to change the line and color of the indicator

axisPointer:{       //坐标轴指示器
    type:'cross',   //十字准星指示器
    crossStyle: {
        color: "rgba(255,215,90)",  //线的颜色
        width: 1,
        type: "solid",
    }
},

full code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="../lib/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'));

      // 指定图表的配置项和数据
      var option = {
        // title: {
        //     text: 'Stacked Line'
        // },
        tooltip: {
            trigger: 'item',
            axisPointer:{       //坐标轴指示器
                type:'cross',   //十字准星指示器
                // label:{
                //     backgroundColor:'#ccc'
                // }
                crossStyle: {
                color: "rgba(255,215,90)",  //线的颜色
                width: 1,
                type: "solid",
                }
            },
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
            saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            name: 'Email',
            type: 'line',
            symbolSize: 5, // 设置折线上圆点大小
            symbol: 'circle', // 设置拐点为实心圆
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
            name: 'Union Ads',
            type: 'line',
            symbolSize: 5, // 设置折线上圆点大小
            symbol: 'circle', // 设置拐点为实心圆
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
            name: 'Video Ads',
            type: 'line',
            symbolSize: 5, // 设置折线上圆点大小
            symbol: 'circle', // 设置拐点为实心圆
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
            name: 'Direct',
            type: 'line',
            symbolSize: 5, // 设置折线上圆点大小
            symbol: 'circle', // 设置拐点为实心圆
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
            name: 'Search Engine',
            type: 'line',
            symbolSize: 5, // 设置折线上圆点大小
            symbol: 'circle', // 设置拐点为实心圆
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
        };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

echarts entry stacked line chart

Guess you like