博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Echarts具体样式个人笔记
阅读量:7309 次
发布时间:2019-06-30

本文共 2366 字,大约阅读时间需要 7 分钟。

虽然查文档很全面,但还是自己罗列一下样式,这样记忆深刻一些。不然每次看文档,时间都花在找上面了/(ㄒoㄒ)/

(如果有大神路过,请问一下,文档那么多样式,你们都是咋记住哒)

1、折线图填充渐变

series: [           areaStyle: {               normal: {                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{                       offset: 0,                       color: '#d68262'                   }, {                       offset: 1,                       color: '#ffe'                   }])               }           }   ]复制代码

2、网格线显示/不显示

yAxis: {	    splitLine: {show: false}    }复制代码

3、离边界的距离

grid: { x: 75, y: 65, x2: 25, y2: 65, borderWidth: 1 }复制代码

4、鼠标悬停的时候是否有数据

tooltip: {}复制代码

5、饼状图阴影+鼠标悬停时的阴影效果

//在 ECharts4 以前,高亮和普通样式的写法,是这样的://这种写法 仍然被兼容,但是,不再推荐。itemStyle: {                normal: {                    color:'#c23531'                    shadowBlur: 200,                    shadowColor: 'rgba(35, 156, 0, 0.5)'                },                emphasis: {                    shadowBlur: 200,                    shadowColor: 'rgba(35, 156, 0, 0.5)'                }            }// ECharts4支持的高亮样式。series:{    emphasis: {        itemStyle: {            // 高亮时点的颜色。            color: 'blue'        },        label: {            show: true,            // 高亮时标签的文字。            formatter: 'This is a emphasis label.'        }    }}复制代码

6、饼状图的文字颜色和线条颜色

label: {        normal: {            textStyle: {                color: 'rgba(255, 255, 255, 0.3)'            }        }},labelLine: {        normal: {            lineStyle: {                color: 'rgba(255, 255, 255, 0.3)'            }        }}复制代码

7、通过 visualMap 组件将数值的大小映射到明暗度

visualMap: {        show: true,//左下角明暗控制条是否显示        min: 80,        max: 600,        inRange: {            colorLightness: [0, 1]        }    }复制代码

8、主题颜色

var chart = echarts.init(dom, 'light'/'dark');复制代码

9、调色盘

option = {    // 全局调色盘。    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],    series: [{        type: 'bar',        // 此系列自己的调色盘。        color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],        ...    }, {        type: 'pie',        // 此系列自己的调色盘。        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],        ...    }]}复制代码

10、 待补充ing……

转载地址:http://ewyim.baihongyu.com/

你可能感兴趣的文章
简要的可行性分析报告(1)
查看>>
ThinkSNS受邀请参加OSC(开源中国)源创会成都站
查看>>
Python实现简单的用户登录
查看>>
【持续更新】常用的JQuery 插件汇总
查看>>
设计模式中的设计原则之最小知识原则(Least Knowledge Principle - LKP)
查看>>
张鑫旭:说说CSS学习中的瓶颈(个人觉得对突破技术瓶颈都有思想上的指导作用)...
查看>>
初始化参数列表
查看>>
CentOS 7.x设置自定义开机启动,添加自定义系统服务
查看>>
掌握这些小技巧,让你的电脑一点都不卡,速度超级快
查看>>
周鸿在360新员工入职培训上的讲话
查看>>
说说美国的数据中心
查看>>
1、安装、配置、连接Openfiler
查看>>
mysql水平拆分与垂直拆分的详细介绍
查看>>
Spring Cloud Alibaba迁移指南2:一行代码从Hystrix迁移到Sentinel
查看>>
飘逸的 CSS3 导航菜单
查看>>
基于dubbo框架下的RPC通讯协议性能测试
查看>>
度量快速开发平台ExportToExcel使用介绍
查看>>
QTP学习笔记----2013.05.02
查看>>
老男孩最近几年常用的免费的开源软件
查看>>
Zab Paxos raft
查看>>