【Echarts.js使用攻略1】曲线的添加与取消

我是芬儿你是沙

于 2023-12-19 14:45:20 发布

阅读量521

点赞数 9

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Serendipitor/article/details/135083968

版权

零、什么是Echarts

Echarts是谷歌的JavaScript开源库，主要用于实现网页端的图表操作。简单说就是，如果你需要在软件或网页内嵌一个交互式的折线图/饼图/柱状图，用Echarts就对了。

Echarts功能强大，具体参考官方文档：echarts官方API

这么好用的官方库，网上应该有很多教程吧？对，也不对。网上教程虽多，我上手这个库的时候还是走了不少弯路，遇到的问题很多，比如

1. 为什么已经执行legendSelect，依旧没有添加新曲线？

2. 为什么单击图例后图例变灰色表示取消选择，曲线没有同步取消选择？

...

这里先讲一下怎么调用echarts.js，再讲一下怎么解决图例与曲线不对应的问题。先上干货。

一、调用Echarts.js的方法

这里用比较简单的方法，就是下载echarts.min.js库。再在html文件中引用相应script

二、怎样实现图例功能

首先在html文件中设置相应的代码块，比如这样

<body onresize="windowResize()">
    <header>
        <ul></ul>
    </header>
    <footer id="legend">
        <div id="search"></div>
        <ul></ul>
        <div class="control-tools">
            <a onclick="onLegendAllClick(true)">全选</a>
            <a onclick="onLegendAllClick(false)">反选</a>
        </div>
    </footer>
    <article id="chart"></article>
</body>
</html>

在上方代码中，我们定义了id为legend（汉文翻译为图例）的footer模块，后续就会在这个位置插入图例。同理，id为search（搜索）的div模块后续会插入搜索框，id为chart的article模块会插入图表。注意，HTML文件只需要给出结构框架，确定不同组件的位置，至于组件的具体内容，是JavaScript代码要填充的，而组件的格式，是CSS代码确定的。

这也就是我们常提倡的模块化编程原理。不同的文件负责不同的功能，方便代码维护。

function updateLengend() {
	// 图例 数据点列表
	let legend = $("footer ul");
	legend.empty();
	let i = 0;
	for (let item of selectedSeries) {
		if (!item) continue;
		let $radio = $("<li/>");
		$radio.attr("style", `color: ${option.color[i % colorList.length]}`);
		// 突出显示
		let $icon = $("<a/>");
		$icon.html(`<svg width="30" height="20" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>background</title>
  <rect fill="none"/>
 </g>
 <g>
  <path id="s2" stroke-width="2" stroke="${option.color[i % colorList.length]}" fill="#000" d="m2.7568,9.6l25,0"/>
  <path id="s1" stroke-width="2" stroke="${option.color[i % colorList.length]}" fill="#fff" d="m20.8568,9.6a5.6,5.6 0 1 1 0,-0.0006"/>
 </g>
</svg>`);
		$icon.attr("onclick", `onLegendClick('${item}', false, this)`);
		// 放大倍数
		//$button = $("<button/>");
		//$button.attr("value", "1");
		//$button.attr("onclick", `onZoomClick(this)`);
		// 数据点名称
		let $label = $("<label></label>");
		$label.text(item);
		$label.attr("id", item);
		$label.attr("onclick", `onLegendClick('${item}', true, this)`);
		$radio.append($icon);
		//$radio.append($button);
		$radio.append($label);
		legend.append($radio);
		//alert("one Completed");
		if (displaySeries.indexOf(item) == -1) {
			chart.dispatchAction({
				type: "legendUnSelect",
				name: item,
			})
			if (!$label.hasClass("dismiss")) {
				$label.addClass("dismiss");
			}
		}
		else {
			chart.dispatchAction({
				type: "legendSelect",
				name: item,
			});
			if ($label.hasClass("dismiss")) {
				$label.removeClass("dismiss");
			}

		}
		i++;
	}
	
}

这个JavaScript代码里，我们把初始化图例的操作封装为一个函数。首先是提出HTML的footer块，命名为legend，再用clear方法清空legend的内容，然后在for循环中依次加入selectedSeries列表的内容。selectedSeries是全部图例，而displaySeries是选中的图例。如果某个系列的曲线是选中的图例，就执行chart.dispatchAction({type:"legendSelect",name:item})操作，即选中该图例。否则，取消选择该图例。

本人原先的代码没有在图例初始化就执行dispatchAction,导致后续的图例选择与曲线添加不同步。加入这一步之后，实现了同步。

我是芬儿你是沙

关注

9
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
【Echarts.js使用攻略1】曲线的添加与取消

首先是提出HTML的footer块，命名为legend，再用clear方法清空legend的内容，然后在for循环中依次加入selectedSeries列表的内容。如果某个系列的曲线是选中的图例，就执行chart.dispatchAction({type:"legendSelect",name:item})操作，即选中该图例。否则，取消选择该图例。注意，HTML文件只需要给出结构框架，确定不同组件的位置，至于组件的具体内容，是JavaScript代码要填充的，而组件的格式，是CSS代码确定的。
复制链接

扫一扫