【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
        })