Echarts可视化教程（十四）—— Echarts中的事件和行为

最新推荐文章于 2024-09-27 15:52:57 发布

書青

最新推荐文章于 2024-09-27 15:52:57 发布

阅读量92

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_75038224/article/details/142590687

版权

第1关： Echarts中的事件和行为

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
	<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<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 = {  //指定图表的配置项和数据
			color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
			title: { text: '产品销量产量利润统计', left: 10, top: 9 },
			xAxis: {  //配置x轴坐标系
				data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
			},
			yAxis: {},  //配置y轴坐标系
			legend: {},
			series: [  //配置数据系列
				{   //设置数据系列1：销量
					name: '销量', type: 'bar',
					data: [5, 28, 16, 20, 15, 33]
				},
				{   //设置数据系列2：产量
					name: '产量', type: 'bar',
					data: [15, 38, 20, 24, 20, 45]
				},
				{   //设置数据系列3：利润
					name: '利润', type: 'bar',
					data: [25, 15, 10, 10, 15, 22]
				}
			]
		};
		myChart.setOption(option);  //使用刚指定的配置项和数据显示图表
		window.addEventListener("resize", function () {
			myChart.resize();  //使图表自适应窗口的大小
		});
		myChart.on('highlight', function (params) {
		    /********* Begin *********/
 
        var seriesIndex = params.seriesIndex;
        // 获取当前点击的数据的索引
        var dataIndex = params.dataIndex;
        // 获取当前系列的数据
        var data = option.series[seriesIndex].data;
        // 将点击的数据值设置为原来的两倍
        data[dataIndex] = data[dataIndex] * 2;
        // 使用刚指定的配置项和数据显示图表
        
    

			/********* End *********/
			myChart.setOption(option)
		});

		myChart.setOption(option);  //为echarts对象加载数据
		var _this = this
		var chartHover = function () {  //创建自定义函数chartHover
			var dataLen = option.series[0].data.length
			_this.myChart.dispatchAction({
				type: 'highlight',  //取消之前高亮的图形
				seriesIndex: 1,
				dataIndex: 2
			})
		}
		//调用chartHover自定义函数，时间间隔为3秒
		chartHover()
    </script>
</body>
</html>