Echarts的一点总结x

最新推荐文章于 2024-07-24 16:11:36 发布

原创最新推荐文章于 2024-07-24 16:11:36 发布 · 397 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

web开发同时被 2 个专栏收录

41 篇文章

订阅专栏

前台js

14 篇文章

订阅专栏

这篇博客总结了Echarts中的图例设置，包括图例的显示、图标类型、点击事件以及数据格式化。提到了如何改变图例的显示状态、图标样式，以及如何处理图例的点击事件，实现纵坐标单位的动态变化。还涵盖了图例的分页显示和扩大点击事件范围的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本概念：

title(标题)

toolbox(工具箱)

tooltip(提示)

lengend(图例)

dataZoom(数据缩放区域)

dataRange(值域)

grid(绘图网络)

axis(坐标轴)

legend: {

　　show: '',

　　icon:"circle",　　//更改图列的默认样式 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'）

　　selected:{

　　　　"全部":false //图例为‘全部’的一项默认置灰

　　}

如果只想改某个图例，可以

data: [{
    name: '系列1',
    // 强制设置图形为圆。
    icon: 'circle',
    // 设置文本为红色
    textStyle: {
        color: 'red'
    }
}]

ECharts 提供的标记类型包括

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片，其中 url 为图片的链接，或者 dataURI。

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

图例的点击事件

mainChart.on('legendselectchanged', function(params) {

　　let legends = params.selected;

　　let selectedArr = toolObj.findKeys(legends);

　　console.log(selectedArr) 　　　　//被选中的图例数组

})

如果想让纵图例单位变化，记得改变，

yAxis.axisLabel.formatte =

function (value, index) {

if (value >= 10000 && value < 10000000) {

value = value / 10000 + '万'; }

else if (value >= 10000000) {

value = value / 10000000 + '千万'; }

return value;

}

ajax代码如下：

//年报表
function yearData(year) {
    let url = '${ctx}/xxxAjax.htm';
    $.ajax({
        url: url,
        type: "post",
        data: {"year": year},
        success: function (data) {
            if (data.code == '1') {
                myChart_yeardata.hideLoading();
                option = data.data;
                if (option && typeof option === "object") {

                    option.yAxis.axisLabel.formatter =
                        function (value, index) {
                            if (value >= 10000 && value < 10000000) {
                                    value = value / 10000 + '万'; }
                            else if (value >= 10000000) {
                                value = value / 10000000 + '千万'; }
                            return value;
                        }

                    myChart_yeardata.setOption(option, true);
                    if (openEvent) {
                        myChart_yeardata.on('click', function (params) {//点击事件
                            let selectMonth = params.name.substring(0, params.name.lastIndexOf("月"));
                            //别的ajax事件，联动报表
                            monthData_line(year, selectMonth);
                            monthData_circle_shop(year, selectMonth);
                            monthData_circle_city(year, selectMonth);
                            monthDataTarget(year,selectMonth);

                            dayData(year, selectMonth, day);
                            dayData_circle_shop(year, selectMonth, day);
                            dayData_circle_city(year, selectMonth, day);
                            month = selectMonth;
                        });
                    }
                }
            } else {
                alert(data.msg);
            }

        }
    });
}

图例分页显示：

legend. type="scroll";不配置默认显示全部，配置以后会根据页面大小自动跳转分页显示

默认让某些不显示：

legend: {

　　show: '',

　　icon:"roundRect",　　//更改图列的默认样式 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'）

　　selected:{

　　　　"上海新天地":true, //图例为‘全部’的一项默认置灰

"上海环贸":false,

......

　　}

扩大点击事件范围：

默认情况是必须点到某一个节点上才会触发click事件

为了让点击上图所示区域就有点击事件，则需要修改js如下

myChart_yeardata.showLoading({
    text: '稍等片刻,精彩马上呈现...',
    effect: 'whirling'
});

//月报表-折线
function monthData_line(year, month) {
    myChart_monthdata_line.off('click');
    let url = '${ctx}/pages/Coffee/getAjax.htm';
    $.ajax({
        url: url,
        type: "post",
        data: {"year": year, "month": month},
        success: function (data) {
            if (data.code == '1') {
                //隐藏动画加载效果
                myChart_monthdata_line.hideLoading();
                option = data.data;
                if (option && typeof option === "object") {
                    option.yAxis.axisLabel.formatter =
                        function (value, index) {
                            if (value >= 10000 && value < 10000000) {
                                value = value / 10000 + '万'; }
                            else if (value >= 10000000) {
                                value = value / 10000000 + '千万'; }
                            return value;
                        }
                    myChart_monthdata_line.setOption(option, true);
                    if (openEvent) {



                        // myChart_monthdata_line.on('click', function (params) {
                        //     let daySelect = params.name;//天
                        //     // alert(year+"----"+month+"++++++++"+daySelect);
                        //     dayData(year, month, daySelect);
                        //     dayData_circle_shop(year, month, daySelect);
                        //     dayData_circle_city(year, month, daySelect);
                        //     day = daySelect;
                        // });


                        myChart_monthdata_line.getZr().on("click", function (params) {
                            // debugger;
                            let pointInPixel = [params.offsetX, params.offsetY];
                            if (myChart_monthdata_line.containPixel('grid', pointInPixel)) {
                                /*此处添加具体执行代码*/
                        var pointInGrid = myChart_monthdata_line.convertFromPixel({seriesIndex: 0}, pointInPixel);
                                //X轴序号
                                var xIndex = pointInGrid[0];

                                //获取当前图表的option
                                var op = myChart_monthdata_line.getOption();

                                //获得图表中我们想要的数据
                                let daySelect = op.xAxis[0].data[xIndex];//天
                                // let daySelect = params.name;
                                // alert(year+"----"+month+"++++++++"+daySelect);
                                dayData(year, month, daySelect);
                                dayData_circle_shop(year, month, daySelect);
                                dayData_circle_city(year, month, daySelect);
                                day = daySelect;

                            }


                        });


                    }
                }
            } else {
                alert(data.msg);
            }
        }
    });
}