echarts数据可视化高级配置

echarts默认主题及自定义主题
我们只需要在初始化echarts实例.init方法中写入主题就行

let mEcharts = echarts.init(document.querySelector('div'), 'light')

默认有两个主题：

• light
• dark

自定义主题：

1. 进入echarts官网主题网址进行自定义主题配置
2. 配置完之后，选择左上角的下载，下载格式选择js文件
3. 下载完之后用script标签引入，在init方法中写入即可

<script src="/theme/infographic.js"></script>
let mEcharts = echarts.init(document.querySelector('div'), 'infographic')

注意：在init方法中的主题名不是乱写的，也不是js文件名，而是echarts全局注册时候的名字

调色盘的使用及优先级

• color:调色盘可以在主题中设置：

echarts.registerTheme('infographic', {
        "color": [
            "#c1232b",
            "#27727b",
            "#fcce10"
        ],

• 可以在全局中进行设置：

let option = {
            color: ['red','green','blue','pink','black'],
            }

• 可以在局部中进行配置：

series: [
                {
                    type: 'pie',
                    data: pieData,
                    radius: ['25%', '50%'],
                    selectedMode: 'multiple',
                    selectedOffset: 20,
                    color: ['gray','orange', 'palegreen', 'red', 'blueviolet']
                }
            ]

优先级：就近原则：局部>全局>主题

线性渐变和径向渐变

• 线性渐变: linear

series: [
	{
		// 显示样式
		itemStyle: {
						// 颜色的设置
                        color: {
                        	// 渐变类型
                            type: 'linear',
                            // x,y,x1,y1渐变的方向
                            x: 0,
                            y: 1,
                            x1: 0,
                            y1: 0,
                            colorStops: [
                            	// 从0%开始渐变，颜色为red
                                {offset: 0, color: 'red'},
                                // 从100%结束渐变，颜色为blue
                                {offset: 1, color: 'blue'}
                            ]
                        }
                    }
			}
]

• 径向渐变：radial

series: [
	{
		// 显示样式
		itemStyle: {
						// 颜色的设置
                        color: {
                        	// 渐变类型
                            type: 'radial',
                            // x,y渐变的位置,r渐变的半径
                            x: 0,
                            y: 1,
                            r: 0,
                            colorStops: [
                            	// 从0%开始渐变，颜色为red
                                {offset: 0, color: 'red'},
                                // 从100%结束渐变，颜色为blue
                                {offset: 1, color: 'blue'}
                            ]
                        }
                    }
			}
]

图表的自适应
监听浏览器窗口的变化，再将实例化的echarts调用resize方法即可：

let mEcharts = echarts.init(document.querySelector('div'))
        window.onresize = function () {
            mEcharts.resize()
        }

图表的加载动画
当后面数据加载慢的时候，浏览器的图表区域会产生留白部分，影响用户体验，这个时候可以使用加载动画进行优化：showLoading，数据加载完之后关闭加载动画：hiedLoading

let mEcharts = echarts.init(document.querySelector('div'))
    mEcharts.showLoading()

图表的增量动画
可以在原来的图表基础上添加或者修改原来的数据从而产生的动画

// 修改原来图表的数据
btnEdit.onclick = function () {
            let numData = ['30', '68', '94', '84', '76', '95']
            let option = {
                series: [
                    {
                        data: numData
                    }
                ]
            }
            mEcharts.setOption(option)
        }
        // 增加学生是小王的数学成绩
        add.onclick = function () {
            fraction.push('100')
            nameData.push('小王')
            let option = {
                xAxis: {
                    data: nameData
                },
                series: [
                    {
                        data: fraction
                    }
                ]
            }
            mEcharts.setOption(option)
        }

小知识：这里的option配置对象是可以有多个的，并且多个option并不会覆盖，而是进行结合，所以后面不需要写重复的配置，只需要把修改的数据进行配置就可以了

图表的动画配置

• animation：开启动画

let option = {
            animation: true
            }

• animationEasing：缓动动画（有多个缓动效果，请移至官网查看）

let option = {
            animationEasing: 'cubicOut'
            }

• animationThreshold：动画的阈值（阈值小于数据的长度就没有效果，大于则反之）

let option = {
            animationThreshold: 5
            }

• animationDuration：动画的时长，毫秒为单位（支持回调函数）

let option = {
            animationDuration: 5000,
            animationDuration: function (arg) {
            		console.log(arg)
            		return arg
            	}
            }