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