【echarts】高级

高级"/>

【echarts】高级

1.主题

• ECharts 中默认内置了两套主题: light dark

var chart = echarts.init(dom, 'light')
var chart = echarts.init(dom, 'dark')

• 也可以去自定义主题
  自定义主题
  

2.调色盘

• 主题调色盘

echarts.registerTheme('itcast', { "color": [ "#893448", "#d95850", "#eb8146", "#ffb248", "#f2d643", "#ebdba4" ],"backgroundColor": "rgba(242,234,191,0.15)", ...... })

• 全局调色盘

全局调色盘是在 option 下增加一个 color 的数组

var option = { // 全局调色盘 color: ['red', 'green', 'blue'], ...... }mCharts.setOption(option)

• 局部调色盘

局部调色盘就是在 series 下增加一个 color 的数组

var option = { // 全局调色盘 color: ['red', 'green', 'blue'], series: [ { type: 'pie', data: pieData, // 局部调色盘 color: ['pink', 'yellow', 'black'] } ] }mCharts.setOption(option)

需要注意一点的是, 如果全局的调色盘和局部的调色盘都设置了, 局部调色盘会产生效果, 这里面遵循的是就近原则

• 渐变色的实现（线性渐变）

 var mCharts = echarts.init(document.querySelector("div"))var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '哈哈', '二妞', '大 强']var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]var option = {xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value'},series:[{type: 'bar',data: yDataArr,itemStyle: {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 }}}]};mCharts.setOption(option)

3.样式

• 直接样式

itemStyle textStyle lineStyle areaStyle label

data: [ { value: 11231, name: "淘宝", itemStyle: { color: 'black' } } ]title: { text: '我是标题', textStyle: { color: 'red' } }label: { color: 'green' }

• 高亮样式

在 emphasis 中包裹原先的 itemStyle 等等

 series: [{type: 'pie',label: { color: 'green' },emphasis: {label: { color: 'red' },},data: [{value: 11231,name: "淘宝",itemStyle: {color: 'black'},emphasis: {itemStyle: {color: 'blue'},}},]}]

4.自适应

• 步骤1: 监听窗口大小变化事件
• 步骤2: 在事件处理函数中调用 ECh

5.全局api

• echarts.init

初始化ECharts实例对象 使用主题

• echarts.registerMap

注册地图数据

• echarts.connect

一个页面中可以有多个独立的图表
每一个图表对应一个 ECharts 实例对象
connect 可以实现多图关联，传入联动目标为 EChart 实例，支持数组

6.实例api

• echartsInstance.setOption

设置或修改图表实例的配置项以及数据 多次调用setOption方法 合并新的配置和旧的配置 增量动画

• echartsInstance.resize

重新计算和绘制图表 一般和window对象的resize事件结合使用
window.onresize = function(){ myChart.resize(); }

• echartsInstance.on echartsInstance.off

常见事件: 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup' 等 事件参数 arg: 和事件相关的数据信息 mCharts.on('click', function (arg) { // console.log(arg) console.log('饼图被点击了') })解绑事件: mCharts.off('click')

• echartsInstance.dispatchAction

 // 触发高亮的行为 mCharts.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: 1})// 触发显示提示框的行为mCharts.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: 3})