echarts显示相关

1.主题

内置主题

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

• 在初始化对象方法init中可以指明
  var chart = echarts.init(dom, 'light')

  
  
  image.png
  
  

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

  
  
  image.png

自定义主题

• 1.在主题编辑器中编辑主题
• 2.下载主题，是一个js文件
  主题下载地址：主题编辑器 - Apache ECharts
  点击官网 > 下载 > 主题下载 > 定制主题
  
  image.png
• 3.引入主题js文件

• 4.在init方法中使用主题

  
  
  image.png

示例代码如下：

2.调色盘

它是一组颜色，图形、系列会自动从其中选择颜色。
调色盘的作用遵循就近原则

• 主题调色盘

主题引入方法同上

image.png

• 全局调色盘

option: {
 color: [ 'red', 'green', 'blue', 'pink','yellowgreen'],
}

设置全局调色盘将会覆盖主题调色盘
显示如下：

image.png

• 局部调色盘

在series下配置color

series: [
  {
    color: [ 'yellow', 'pink', 'black', 'gray','green'], 
  }
]

设置局部调色盘将会覆盖全局调色盘
显示如下：

image.png

• 线性渐变

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

image.png

• 径向渐变

                    itemStyle: {
                        color: {
                            type: 'radial',  //径向渐变
                            x: 0.5,  
                            y: 0.5,
                            r: 0.5,
                            colorStops: [
                                {
                                    offset: 0, color: 'red' // 0%处颜色为红色
                                },
                                {
                                    offset: 1, color: 'blue'  // 100%处颜色为蓝色
                                }
                            ],
                            global: false //缺省为false
                        }
                    }

image.png

示例代码如下：

3.样式

优先级高，会覆盖主题中、调色盘的效果。

• 直接样式

itemStyle、textStyle、 lineStyle、 areaStyle、 label

• 高亮样式

在emphasis中包裹itemStyle、textStyle、lineStyle、areaStyle、label

4.自适应

当浏览器的大小发生变化的时候，如果想让图表也能随之适配变化

• 1.监听窗口大小变化事件
• 2.在事件处理函数中调用ECharts实例对象的resize即可

//第一种
window.onresize = function(){
  myChart.resize()
}
//第二种
window.onresize = mCharts.resize