Echarts中鼠标事件的处理

最新推荐文章于 2024-08-15 14:01:38 发布

小智张

最新推荐文章于 2024-08-15 14:01:38 发布

阅读量308

点赞数 3

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/2301_77751917/article/details/137774629

版权

myChart.on('click',function(params){
        var yt=alert("鼠标单击事件，您刚才单击了："+params.name);
        window.alert("将为您打开一个新窗口，搜索关键词："+params.name);
        window.open('https://www.baidu.com/s?wd='+encodeURIComponent(params.name))
    });
    window.addEventListener("resize",function(){
        myChart.resize();
    });

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
    <script src="js/infographic.js"> </script>
    <script src="js/macarons.js"> </script>
    <script src="js/jquery-3.3.1.js"> </script>
    <script src="js/dark.js"> </script>
    <!-- <script src="js/echarts521.js"> </script> -->
</head>
<body>
    <div id="themeArea"><label>ECharts 主题切换：</label></div>
    <div>
        <select name="you select theme:" id="selection">
            <option value="infographic">infographic</option>
            <option value="macarons">macarons</option>
            <option value="jquery-3.3.1">jquery-3.3.1</option>
            <option value="dark">dark</option>
            <!-- <option value="echarts521">echarts521</option> -->
        </select>
    </div>
    <div id="main" style="width: 600px;height:400px;background-color:#00FFFF ;"></div>
    <script type="text/javascript">
		//基于准备好的dom，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
        var waterMarkText = '小智张'; // 设置水印的字符
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		canvas.width = canvas.height = 100;
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
        ctx.globalAlpha = 0.36,//水印颜色
		ctx.globalAlpha = 10;
		ctx.font = '8px Microsoft Yahei'; // 设置水印文字的字体
		ctx.translate(60, 60); // 设置水印文字的偏转值
		ctx.rotate(-Math.PI / 4); // 设置水印旋转的角度
		ctx.fillText(waterMarkText, 0, 0); // 设置填充水印
		var option = {  //指定图表的配置项和数据
            backgroundColor: {type:'patten',image:canvas,repeat:'repeat'},
            title:{
                text:'气候温度与降水量蒸发量的关系',
                textStyle:{
                    color:'pink',
                },
                x:'center',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
                }
            },
            toolbox: {
                feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
                }
            },
            legend: {
                top:'30,30',
                data: ['蒸发量', '降水量', '温度']
            },
            xAxis: [
                {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
                axisPointer: {
                    type: 'shadow'
                }
                }
            ],
            yAxis: [
                {
                type: 'value',
                name: '降水量',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} ml'
                }
                },
                {
                type: 'value',
                name: '温度',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value} °C'
                }
                }
            ],
            series: [
                {
                name: '蒸发量',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' ml';
                    }
                },
                data: [
                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                ]
                },
                {
                name: '降水量',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' ml';
                    }
                },
                data: [
                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                ]
                },
                {
                name: '温度',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' °C';
                    }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
            ]
    };
    myChart.setOption(option);
    $('#selection').change(function(){
        myChart.dispose();
        let yourtheme = $(this).val();
        myChart = echarts.init(document.getElementById('main'),yourtheme);
        myChart.setOption(option);
        myChart.resize();
    });
    myChart.on('click',function(params){
        var yt=alert("鼠标单击事件，您刚才单击了："+params.name);
        window.alert("将为您打开一个新窗口，搜索关键词："+params.name);
        window.open('https://www.baidu.com/s?wd='+encodeURIComponent(params.name))
    });
    window.addEventListener("resize",function(){
        myChart.resize();
    });
    </script>
</body>
</html>