echarts中的显示

主题

默认主题

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

在初始化对象方法 init 中可以指明

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

 light效果

var box=echarts.init(document.getElementById("box") ,'light');

 

 

 

 dark效果

var box=echarts.init(document.getElementById("box") ,'dark');

 

 

 自定义主题

在主题编辑器中编辑主题

主题编辑器的地址为: https://echarts.apache.org/zh/theme-builder.html

1>在该地址中, 定义一个主题的很多方面的内容:

2>下载主题, 是一个 js 文件

设置好想要的主题样式之后点击下载，下载js格式

3>引入主题 js 文件

<script src="./lib/customed.js"></script>

4>在 init 方法中使用主题

var box=echarts.init(document.getElementById("box") ,'customed');

init方法中的第二个参数customed就是主题的名称，这个名称叫什么我们可以在itcast.js的代码中看出

 调色盘

它是一组颜色，图形、系列会自动从其中选择颜色，不断的循环从头取到尾，再从头取到尾，如此往复

主题调色盘

在刚刚自定义下载的主题中，设置我们想要的颜色

 

 

 引入主题文件后我们可以看到

                                 没引入之前                                              引入之后

   

全局的调色盘

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

如果配置了全局调色盘，那么它将覆盖主题调色盘

var option = {
    color:['red','blue','green'],
  series: [
   {
      type: 'pie',
      data: pieData
   }
 ]
}　

 此时就会显示我们全局定义的颜色，

 

 

 局部调色盘

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

var option = {
    color:['red','blue','green'],
  series: [
   {
      type: 'pie',
      data: pieData,
    color:['pink','skyblue','orange'],

   }
 ]
}　

 此时局部调色就会覆盖全局调色

 

 

 注意：局部>全局>主题，采取就近原则

渐变颜色

在 ECharts 中, 支持线性渐变和径向渐变两种颜色渐变的方式

线性渐变

线性渐变的类型为 linear , 他需要配置线性的方向, 通过 x, y, x2, y2 即可进行配置，x , y , x2 , y2 , 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 global 为 true ，则该四个值是绝对的像素位置，90在下述代码中的 0 0 0 1 意味着从上往下进行渐变

 series: [
  {
    type: 'bar',
    data: yDataArr,
    itemStyle: {
     color: {
      type: 'linear',  //渐变类型，，linear线性
      x: 0,  //决定线性渐变的方向
      y: 0,//决定线性渐变的方向
      x2: 0,//决定线性渐变的方向
      y2: 1,//决定线性渐变的方向
      colorStops: [{
       offset: 0, color: 'red' // 0% 处的颜色
     }, {
       offset: 1, color: 'blue' // 100% 处的颜色
     }],
      globalCoord: true
    }
   }
  }
 ] 

 

 

 径向渐变

线性渐变的类型为 radial , 他需要配置径向的方向, 通过 x , y , r 即可进行配置，前三个参数分别是圆心 x , y 和半径，取值同线性渐变

 series: [
  {
    type:'bar',
    data:yDataArr,
     itemStyle: {
       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 
      }
    }
  }
]

 样式

 直接样式

• itemStyle：控制某一区域的样式
• textStyle：图表的标题样式
• lineStyle：控制线的样式
• areaStyle：控制区域的样式
• label：饼图当中文字的样式

 以淘宝这个部分为例

 data: [{
            value: 100,
            name: "淘宝",
            itemStyle: { // 控制淘宝这一区域的样式
              color: 'blue'
            },
            label: {
              color: 'red'
            },
]

 

 

 

 高亮样式

 在 emphasis 中包裹原先的 itemStyle等等

data: [{
            value: 100,
            name: "淘宝",
            itemStyle: { // 控制淘宝这一区域的样式
              color: 'blue'
            },
            label: {
              color: 'red'
            },
            emphasis: {
              itemStyle: { //鼠标经过变色
                color: 'orange'
              },
              label: {//鼠标经过变色
                color: 'blue'
              }
            }
          },
]

 

 

 自适应

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

<script>
    var box = echarts.init(document.getElementById("box"))
    var xDataArr = ['张三', '李四', '王五', '赵六']
    var yDataArr = [70, 90, 60, 80]
    var option = {
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          data: yDataArr,
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: {
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: {
            show: true,
            rotate: 60
          },
          barWidth: '30%'
        }
      ]
    }
    box.setOption(option)
  </script>

 

此时浏览器窗口变化的同时也想让图表进行适配变化

1>监听窗口大小变化事件

2>在事件处理函数中调用 ECharts 实例对象的 resize 即可

 window.onresize=function(){
        // console.log(window.onresize)
        //调用echarts实例对象resize方法
        box.resize()
    }

 

 此时图表就随之窗口的变化而变化

 这样写也是一样的

window.onresize=box.resize　

这里是函数的引用赋值，当浏览器的窗口发生变化，将会调用resize函数，注意resize后面不可以加“()”