简书 echarts mysql_记Echarts的一些用法

Echarts柱状图每个柱设置不同的颜色 效果如下图

image.png

series:[

{

name:'邮箱',

type:'bar',

barWidth:'60%',

label:{

normal:{

show:true,

position:'top'

}

},

itemStyle:{

normal:{

color:function(params){

letcolorList=[

'#1c88c9',

'#2e5399',

'#9f4176',

'#2c7c7d',

'#2ab1b5',

];

returncolorList[params.dataIndex];

}

//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组

},

},

data:[22,55,22,55,666]

},

]

Echarts取消网格线

image.png

xAxis:{

type:'value',

show:false,

splitLine:{

show:false

}

}

比如X轴的设置 show属性是设置X轴是否显示 splitLine是设置网格线是否显示

然后如上图 要使Y轴是柱型数据

Echarts设置渐变色

image.png

series:[

{

type:'bar',

barWidth:'30%',

itemStyle:{

normal:{

//重点在于利用Echarts内置的渐变色生成器，其中

color:new echarts.graphic.LinearGradient(

1,0,0,1,

[

{offset:1,color:'#14c8d4'},

{offset:0,color:'#43eec6'}

]

),

//有关shadow的属性用来设置阴影颜色及偏移

shadowBlur:10,

shadowColor:'rgba(67,138,298,0.3)',

shadowOffsetX:[1],

shadowOffsetY:[1],

},

},

]

南丁格尔图，通过半径区分数据大小

可选择两种模式：

'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。

'area' 所有扇区圆心角相同，仅通过半径展现数据大小。

image.png

关键代码如下:

series : [

{

roseType: 'radius'

}

]

比较复杂的label写法

image.png

series: [

{

name:'访问来源',

type:'pie',

radius: ['40%', '55%'],

label: {

normal: {

formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',

backgroundColor: '#eee',

borderColor: '#aaa',

borderWidth: 1,

borderRadius: 4,

rich: {

a: {

color: '#999',

lineHeight: 22,

align: 'center'

},

hr: {

borderColor: '#aaa',

width: '100%',

borderWidth: 0.5,

height: 0

},

b: {

fontSize: 16,

lineHeight: 33

},

per: {

color: '#eee',

backgroundColor: '#334455',

padding: [2, 4],

borderRadius: 2

}

}

}

},

}

]

配置饼图的颜色 线性渐变或者自定义图片背景

image.png

image.png

// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置

color: {

type: 'linear',

x: 0,

y: 0,

x2: 0,

y2: 1,

colorStops: [{

offset: 0, color: 'red' // 0% 处的颜色

}, {

offset: 1, color: 'blue' // 100% 处的颜色

}],

globalCoord: false // 缺省为 false

}

// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变

color: {

type: 'radial',

x: 0.5,

y: 0.5,

r: 0.5,

colorStops: [{

offset: 0, color: 'red' // 0% 处的颜色

}, {

offset: 1, color: 'blue' // 100% 处的颜色

}],

globalCoord: false // 缺省为 false

}

// 纹理填充

color: {

image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串

repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'

}

关于tooltip的位置可能超出图表容器

未超出.png

已超出容器.png

设置tooltip的位置 代码如下

// 绝对位置，相对于容器左侧 10px, 上侧 10 px

position: [10, 10]

// 相对位置，放置在容器正中间

position: ['50%', '50%']

position: function (point, params, dom, rect, size) {

// 固定在顶部

return [point[0], '10%'];

}

参数：

point: 鼠标位置，如 [20, 40]。

params: 同 formatter 的参数相同。

dom: tooltip 的 dom 对象。

rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。

size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。

返回值：

可以是一个表示 tooltip 位置的数组，数组值可以是绝对的像素值，也可以是相 百分比。

也可以是一个对象，如：{left: 10, top: 30}，或者 {right: '20%', bottom: 40}。