echart 使用小结

Bmob 发布于2019-08-26 13:37 / 3514人阅读

摘要：一隐藏特定类目有时候希望默认选中特定类目，取消选中特定类目，那么可以这样做年年年只需要将不想显示的项设置为即可。

一、legend 1、隐藏特定类目

有时候希望默认选中特定类目，取消选中特定类目，那么可以这样做：

legend: {
    data: ["2011年", "2012年"],
    selected: {
        "2011年":false
    }
}

只需要将不想显示的项设置为false即可。

2、设置图标形状

legend: {
    icon: "roundRect" // circle, 
}

详情：https://www.echartsjs.com/opt...

二、series 1、曲线平滑：

series: [
    { smooth: true;}
]

2、去掉折线中的小圆点：

series: [
    {symbol: "none";}
]

汇总

option = {
    title: {
        text: "世界人口总量",
        subtext: "数据来自网络"
    },
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow"
        }
    },
    legend: {
        data: ["2011年", "2012年"],
        selected: {
            "2011年":false
        }
    },
    grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
    },
    xAxis: {
        type: "value",
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: "category",
        data: ["巴西","印尼","美国","印度","中国","世界人口(万)"]
    },
    series: [
        {
            name: "2011年",
            type: "bar",
            smooth: true;
            symbol: "none";
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
            name: "2012年",
            type: "bar",
            symbol: "none";
            smooth: true;
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
};

详见demo（需自行添加设置）：https://echarts.baidu.com/exa...

持续更新中

超融合服务器云服务器设计小结对象小结个人小结小结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109193.html

Webpack 3一些代码体积优化方案的小结

摘要：表示生成一个懒加载的，只有当需要时才会被加载。主要是作用域提升，将所有模块放在同一个作用域当中，一方面能提高运行速度，另一方面也能降低文件体积。前提是你的代码是用模块写的。参考文章学习小结前言之前接手公司一个前端项目，开发了几个月后越来越难以忍受项目结构的混乱和打包体积的臃肿（脚手架和基本功能代码都是从公司的其他项目复制过来的），如果不立即进行重构，难以想象以后要怎么维护各个产品线...

taowen 2019-08-22 18:20 评论0 收藏0
ECharts 学习笔记01, 柱状图

摘要：编写文件我们需要通过方法初始化一个实例然后通过方法绘图。初始化实例设定图表的配置项和数据柱状图销量衬衫裤子袜子销量显示图表小结以上就是使用进行绘图的第一个例子。休息一下，马上开始下一次学习目标使用 ECharts 绘制简单的柱状图, 示例如下 showImg(https://segmentfault.com/img/bVbqkco?w=800&h=400); 搭建环境新建文...

KunMinX 2019-08-23 16:18 评论0 收藏0
ECharts 学习笔记02, 饼图与南丁格尔图

摘要：目标使用绘制饼状图并在此基础上绘制南丁格尔饼图示例如下搭建环境新建文件夹目录结构如下编写我们在中放入和分别用于显示饼状图和南丁格尔图编写文件为了使和并列我们需要加上样式编写文件饼状图需要设置。目标使用 echarts 绘制饼状图, 并在此基础上绘制南丁格尔饼图, 示例如下 showImg(https://segmentfault.com/img/bVbqkV8?w=400&h=4...

张迁 2019-08-23 16:18 评论0 收藏0