echarts样式

Qwe7

发布于 2022-06-16 11:54:51

7600

发布于 2022-06-16 11:54:51

文章被收录于专栏：网络收集

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: 在事件处理函数中调用 ECharts 实例对象的 resize 即可

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="js/echarts.min.js"></script>
</head>

<body>
  <div style=" height:400px;border:1px solid red"></div>
  <script>
    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: xDataAr
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        type: 'bar',
        data: yDataAr
      }]
    };

    mCharts.setOption(option) // 监听window大小变化的事件 
    window.onresize = function () { // 调用echarts示例对象的resize方法 
      mCharts.resize()
    } // window.onresize = mCharts.resize 
  </script>
</body>

</html>

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

label