echarts之事件交互

憨憨yang

于 2024-04-22 11:28:14 发布

阅读量266

点赞数 2

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/m0_74811962/article/details/138067931

版权

知识回顾：

鼠标事件的事件参数是事件对象的数据的各个属性，对于图表的点击事件，基本参数如下，其它图表诸如饼图可能会有部分附加参数。例如饼图会有percent属性表示百分比，具体见各个图表类型的 label formatter 回调函数的 params

交互事件说明：ECharts 中的事件分为两种，一种是鼠标事件，在鼠标点击某个图形上会触发，还有一种是调用 dispatchAction 后触发的事件。

鼠标事件：

'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu'。

具体详见官网文件：https://echarts.apache.org/zh/api.html#events

dataZoom设置：

主要实现代码（step1）：

dataZoom: [{
                    // yAxisIndex: 'none'
                    type:'inside',
                    show:true,
                    start:20,
                    end:70,
                },
            ],

主要实现代码（step2）：

        //zoom实现
        myChart1.on('dataZoom',function(params){
            console.log(params);
            var startValue=myChart1.getModel().option.dataZoom[0].startValue;
            var endValue=myChart1.getModel().option.dataZoom[0].endValue;
            //初始化 
            var startValue=myChart1.getModel().option.dataZoom.start;
            var startValue=myChart1.getModel().option.dataZoom.start;
            console.log(startValue,endValue,startPercent,endPercent);
            option1.dataZoom[0].start = startPercent;
            option1.dataZoom[0].end = endPercent;
            myChart1.setOption(option1);

        });

全部代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/echarts.min.js" ></script>
        <script src="js/jquery-3.3.1.js"></script>
        <script src="js/macarons.js"></script>
        <script src="js/infographic.js"></script>
        <script src="js/essos.js"></script>
		<title>专升本数据</title>
		
	</head>
	<body>
        <div id="themeArea"><label>主题切换</label></div>
        <div>
            <select name="nivcai" id="stle">
                <option value="macarons">macarons</option>
                <option value="infographic">infographic</option>
                <option value="essos">essos</option>
                
            </select>
        </div>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main1" style="width: 1000px;height:400px;"></div>
    <div id="main2" style="width: 800px;height:500px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main1'));
        var option1 ={
            title:{  //标题组件
                text:'专升本数据',
                subtext:'来自公众号'
            },
            toolbox: {
                show: true,
                feature: {
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
                }
            },
            tooltip:{trigger:'axis'},
            legend:{
                data:['2019专升本数据','2020专升本数据','2021专升本数据']
            },
            dataZoom: [{
                    // yAxisIndex: 'none'
                    type:'inside',
                    show:true,
                    start:20,
                    end:70,
                },
            ],
		    xAxis: {
		        type: 'category',
		        data: ['汉口学院', '武汉商学院', '湖北大学', '湖北理工学院', '江汉大学', '长江大学','湖北医药学院','湖北工程学院',]
		    },
		    yAxis: {
		        type: 'value'
		    },

		    series: [
                {
                    name :'2019专升本数据',
                    data:[50,91,42,63,33,25,65,94],
                    type:'bar'
                },
                {
                    name :'2020专升本数据',
                    data:[47,53,66,42,39,27,62,52],
                    type:'bar'
                },
                {
                    name :'2021专升本数据',
                    data:[55,95,46,33,23,53,59,64],
                    type:'bar'
                },
            ]
		};

        var myChart2 = echarts.init(document.getElementById("main2"));
        var option2 ={
            tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    data: [
      '汉口学院',
      '武汉商学院',
      '湖北大学',
      '湖北理工学院',
      '江汉大学',
      '长江大学',
      '湖北医药学院',
      '湖北工程学院',
    ]
  },
  series: [
    {
      name: '专升本数据',
      type: 'pie',
      selectedMode: 'single',
      radius: [0, '35%'],
      label: {
        position: 'inner',
        fontSize: 14
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 668, name: '云计算技术' },
        { value: 635, name: '大数据技术' },
        { value: 369, name: '计算机应用技术', selected: true }
      ]
    },
    {
      name: '专升本数据',
      type: 'pie',
      radius: ['45%', '65%'],
      labelLine: {
        length: 30
      },
      label: {
        formatter: '{b|{b}：}{c}  {per|{d}%}  ',
        backgroundColor: '#F6F8FC',
        borderColor: '#8C8D8E',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          a: {
            color: '#6E7079',
            lineHeight: 22,
            align: 'center'
          },
          hr: {
            borderColor: '#8C8D8E',
            width: '100%',
            borderWidth: 1,
            height: 0
          },
          b: {
            color: '#4C5058',
            fontSize: 14,
            fontWeight: 'bold',
            lineHeight: 33
          },
          per: {
            color: '#fff',
            backgroundColor: '#4C5058',
            padding: [3, 4],
            borderRadius: 4
          }
        }
      },
      data: [

        { value: 308, name: '汉口学院' },
        { value: 235, name: '湖北工程学院' },
        { value: 210, name: '武汉商学院' },
        { value: 251,name: '湖北医药学院' },
        { value: 34, name: '湖北大学' },
        { value: 147, name: '移速' },
        { value: 35, name: '江汉大学' },
        { value: 52, name: '长江大学' }
      ]
    }
  ]
        }
 
 
        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
        myChart2.setOption(option2);

        //zoom实现
        myChart1.on('dataZoom',function(params){
            console.log(params);
            var startValue=myChart1.getModel().option.dataZoom[0].startValue;
            var endValue=myChart1.getModel().option.dataZoom[0].endValue;
            //初始化 
            var startValue=myChart1.getModel().option.dataZoom.start;
            var startValue=myChart1.getModel().option.dataZoom.start;
            console.log(startValue,endValue,startPercent,endPercent);
            option1.dataZoom[0].start = startPercent;
            option1.dataZoom[0].end = endPercent;
            myChart1.setOption(option1);

        });

        $('#stle').change(function(){
            myChart1.dispose();
            let yourtheme =$(this).val();
            myChart1=echarts.init(document.getElementById('main1'),yourtheme);
            myChart1.setOption(option1);
            myChart1.resize();
        });


        // 鼠标点击触发
        myChart1.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(){
            myChart1.resize();
        });


        myChart2.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(){
            myChart2.resize();
        });


    </script>
</body>
</html>

实现效果展示：

主要实现了数据区域缩放事件，大家可以尝试其他的事件，看完官网就快速上手一下吧！

憨憨yang

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echarts之事件交互

鼠标事件的事件参数是事件对象的数据的各个属性，对于图表的点击事件，基本参数如下，其它图表诸如饼图可能会有部分附加参数。交互事件说明：ECharts 中的事件分为两种，一种是鼠标事件，在鼠标点击某个图形上会触发，还有一种是调用。属性表示百分比，具体见各个图表类型的 label formatter 回调函数的。主要实现了数据区域缩放事件，大家可以尝试其他的事件，看完官网就快速上手一下吧！
复制链接

扫一扫