Echarts自定义折线图例,增加选中功能

最新推荐文章于 2023-07-31 13:23:06 发布

weixin_30240349

最新推荐文章于 2023-07-31 13:23:06 发布

阅读量795

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/a-cat/p/8494510.html

版权

用Echarts图表开发，原本的Echarts图例不一定能满足我们的视觉要求。

下面是Echarts 折线图自定义图例，图例checked选中，相应的折线线条会随之checked，其余未选中的图例对应的折线opacity会降低，（柱状图，饼图等等也类似于此），这是一个小例子（如果满足不了您的视觉要求，您可以自己定义css样式，达到自己想要的视觉效果）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts 自定义折线图例</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
<style>
    ul,li{
     list-style:none;}
    .charts-left-list {
    
        list-style: none;
        overflow: hidden;
        float: left;
        width: 100%;
        padding: 0;
    }
    .charts-left-list li {
    
        float: left;
        width: 100%;
        color: #4A4A4A;
        font-size: 13px;
        line-height: 30px;
        border-bottom: 1px solid #EEEEEE;
    }
    .pull-left {
    
        float: left !important;
    }
    span.pull-right {
    
        padding: 0 6px;
        float: right !important;
    }
    li.state-selected {
    
        background-color: rgba(240, 225, 28, 0.3);
    }
    
    span.item-color{
    
        float:left;
        width:10px;
        height:10px;
        border-radius:50%;
        margin-top: 9px;
        margin-right: 6px;
    }
    .tooltip-all{
    
        max-width:180px;
        padding:10px 16px;
    }
    .custom-tooltip{
    
        float: left;
        width:100%;
    }
    .tooltip-date{
    
        float: left;
        width:100%;
        padding-bottom: 10px;
        border-bottom: 1px solid #EEEEEE;
    }
    .tooltip-detail{
    
        float: left;
        padding:10px 0;
    }
    .item-name{
    
        float:left;
    }
    .item-num{
    
        float:right;
    }
    
    
</style>
</head>

<body>

<div class="charts-left-list" style="width:30%; float:left">
    <ul>
        <li>
            <span class="pull-left">
                <span class="num">1</span>
                <span class="list-color"></span>
                <span class="list-name">安凱客車</span>
            </span>
            <span class="pull-right">8.50</span>
        </li>
        <li>
            <span class="pull-left">
                <span class="num">2</span>
                <span class="list-color"></span>
                <span class="list-name">奧馳</span>
            </span>
            <span class="pull-right">8.20</span>

最低0.47元/天解锁文章

weixin_30240349

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Echarts自定义折线图例,增加选中功能

用Echarts图表开发，原本的Echarts图例不一定能满足我们的视觉要求。下面是Echarts 折线图自定义图例，图例checked选中，相应的折线线条会随之checked，其余未选中的图例对应的折线opacity会降低，（柱状图，饼图等等也类似于此），这是一个小例子（如果满足不了您的视觉要求，您可以自己定义css样式，达到自己想要的视觉效果）：<!doctype htm...
复制链接

扫一扫