Echarts 3使用

各属性

itemStyle

itemStyle用于设置通用样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等；

itemStyle:{emphasis:{shadowBlur:200,//阴影的大小shadowOffsetX:10,//阴影水平方向上的偏移shadowOffsetY:10,//阴影垂直方向上的偏移shadowColor:'rgba(0,0,0,0.5)'//阴影颜色}
}

emphasis是鼠标hover时候的高亮样式。

setOption vs lable.textStyle

在option中可以设置全局的背景颜色和文本颜色。backgroundColor

setOption({backgroundColor:'#2c343c',//背景颜色textStyle:{color:'rgba(255,255,255,0.3)'//文本颜色}
})

也可以在每个系列中分别设置，每个系列的文本设置在lable.textStyle.

lable:{textStyle:{//设置文本颜色color:'rgba(255,255,255,0.5)'}
}

饼图的话还可以将标签的视觉引导线颜色设置为浅色：

labelLine:{lineStyle:{//引导线颜色color:'rgba(255,255,255,0.3)'}
}

label和labelLine的样式也有emphasis状态。

饼状图的扇形颜色设置，itemStyle设置全局扇形颜色，data下设置数据项实现，以及visualMap将数值大小映射到明暗度。

itemStyle:{//全局设置,置于option中color:'c23531',shadowBlur:200,shadowColor:'rgba(0,0,0,0.5)'
}
=====================================================
data:[{//data数据设置value:400,name:'搜索引擎',itemStyle:{color:'c23531'}
},...]
=====================================================
visualMap:{//数值大小范围映射show:false,min:80,max:600,inRange:{colorLightness:[0,1]}
}

样式简介

颜色主题、调色盘、直接样式设置（itemStyle\lineStyle\areaStyle、label...）、视觉映射(visualMap)

主题Theme

最简单的更改全局样式的方式，直接采用颜色主题。

var chart=echarts.init(dom,'light');//light和dark两套主题,或者自己加载

调色盘

可以在option中设置，给定了一组颜色，图形、系列会自动从其中选择颜色。可以设置全局的调色盘，也可以设置系列自己专属的调色盘。

option={color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a'],//全局调色盘series:[{type:'bar',//系列调色盘color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a'},{type:'bar',color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a']},{...}]
}

直接的样式设置

itemStyle,lineStyle,areaStyle,label,...可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。

一般来说，Echarts的各个系列和组件，都遵从这些命名习惯；

高亮样式：emphasis

visualMap:

图形类别symbol、图形大小symbolSize、颜色color、透明度opacity、颜色透明度colorAlpha、颜色明暗度colorLightness、颜色饱和度colorSaturation、色调colorHue

Echarts 3使用相关推荐

echarts数据变了不重新渲染，以及重新渲染了前后数据会重叠渲染的问题
1.echarts数据变了但是视图不重新渲染新建Chart.vue文件 <template> <p :id="id" :style="style&q ...
r语言echarts画箱线图_echarts学习笔记之箱线图的分析与绘制详解
一.箱线图 box-plot 箱线图(boxplot)也称箱须图(box-whisker plot),它是用一组数据中的最小值.第一四分位数.中位数.第三四分位数和最大值来反映数据分布的中心位置和散布 ...
echarts x轴文字个数太多_echarts x轴标签文字过多导致显示不全，最有效的3种解决方法...
echarts x轴标签文字过多导致显示不全,只是我之前在csdn发表过,经过实践,效果不错! 如图: 办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用 ...
获取this_小程序获取微信运动步数并集成echarts报表显示
需求现在运动计步非常的火,大家常用的计步工具一般有keep.咕咚.微信运动和其他移动设备等,本文是基于微信小程序获取用户的微信运动数据并可视化呈现出来. 先看一下最终实现效果: 微信运动规则在开发 ...
echarts切换折线图变大_这个月，我就和折线图杠上了...
作者 hustcc 蚂蚁金服·数据体验技术团队 TL;DR G2Plot 是一个注重于细节体验的通用统计图表库. 背景折线图用于表示连续时间跨度内的数据,它通常用于显示某变量随时间的变化模式:是上升 ...
Echarts读取本地json文件渲染轨迹，亲测ok
Echarts读取本地json文件渲染轨迹,亲测ok 1. 报错及解决 2. 效果图 3. 源码lines-track.html如下参考 1. 报错及解决报错:由于浏览器的同源策略已拦截跨源请求 ...
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
grid: {show: false,left: '0px',top: '50px',right: '1px',bottom: '0px',containLabel: true,backgroundC ...
echarts 横纵分割线颜色透明度
/*横纵分割线颜色透明度*/ xAxis: {axisLabel: {textStyle: {color: "#2484db"}},axisLine: {lineStyle: {c ...
封装echarts china map geo实现dispatch触发geoSelect事件高亮显示某个省份和城市，并定义复杂样式
实现如下效果用echarts geo类型的中国地图封装vue组件,具体的地图信息china.json传送门https://blog.csdn.net/qq_37860634/article/deta ...
JS实现每隔几个字符添加字符(串)：实现每间隔10个字就换行一次，多用于echarts横坐标的显示文本拥挤换行；实现间隔8个字符就添加❤❤
//最直接一行代码搞定---------------------------------------- '实现每间隔10个字就换行一次,多用于echarts横坐标的显示文本'.replace(/(.{ ...