Echarts折线图点击事件

最新推荐文章于 2024-04-04 23:40:01 发布

漫彧明柒

最新推荐文章于 2024-04-04 23:40:01 发布

阅读量2.1w

点赞数 1

分类专栏： echarts-java

echarts-java 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="js/ECharts/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'js/ECharts/dist'
            }
        });

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));
                var ecConfig = require('echarts/config');
                myChart.on(ecConfig.EVENT.CLICK, eConsole);
                var option = {

                    tooltip : {
                        trigger: 'axis'

                    },
                    legend: {
                        x:'right',

                        data:['人数']
                    },

                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : [10,20,30,40,50,60,70,80,90,100]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            axisLabel : {
                                formatter: '{value} 人'
                            }
                        }
                    ],
                    series : [
                        {                       
                            clickable : true,                        
                            name:'人数',
                            type:'line',
                            data:[1,2,3,4,5,6,7,8,9,0],
                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );
        function eConsole(param) {
            if (typeof param.seriesIndex == 'undefined') {
                return;
            }
            if (param.type == 'click') {
                alert(param.data+1);
            }
        }
    </script>

</body>
</html>

漫彧明柒

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Echarts折线图点击事件

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title></head><body> <!-- 为ECharts准备一个具备大小（宽高）的
复制链接

扫一扫