echarts图表自定义图例

最新推荐文章于 2024-09-30 14:28:41 发布

July++

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量1.1w

点赞数 2

文章标签： js vue.js javascript echarts

本文链接：https://blog.csdn.net/weixin_41056945/article/details/121380840

版权

本文将介绍如何在Echarts中实现图例样式的自定义，通过这种方式，可以更清晰地展示图表数据，提升视觉效果。

摘要由CSDN通过智能技术生成

在这里插入图片描述
在echarts中自定义图例样式就跟表格一样清晰的展示数据

<!-- 图表容器 -->
<div id="myChart1" ref="myChart1" :style="{ width: '100%'}"></div>

//在获取到图表数据后再调用此方法进行图表渲染
   drawLine() {
   
      let myChart = "";
      let option = {
   
        title: {
   
          text: "0.00",
          subtext: "",
          x: "center",
          y: "80px",
          textStyle: {
   
            // 标题
            fontWeight: "normal",
            fontSize: 20,
            color: "#000",
          },
          subtextStyle: {
   
            // 副标题
            fontWeight: "normal",
            fontSize: 13,
            color: "#aaa",