Echarts的高级使用，自定义背景，调色盘

最新推荐文章于 2025-06-04 11:06:00 发布

qq_58956810

最新推荐文章于 2025-06-04 11:06:00 发布

阅读量748

点赞数 10

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_58956810/article/details/144664383

显示相关

主题

自定义主题在echarts官网中的下载中就可以下载（chalk.js文件）

效果：

调色盘

x,y,x2,y2来决定线性渐变的方向

代码实现：

    var option = {
        title: {
          text: "成绩",
          link: "http://www.itcast.cn",
          textStyle: {
            color: "blue",
          },
        },
        xAxis: {
          type: "category", // 类目轴
          data: xDataArr,
        },
        yAxis: {
          type: "value", // 数值轴
        },
        series: [
          {
            name: "语文",
            type: "bar",
            data: yDataArr,
            itemStyle: {
              // color: {
              //   type: "linear", // 线性渐变
              //   x: 0,
              //   y: 0,
              //   x2: 0,
              //   y2: 1,
              //   colorStops: [
              //     {
              //       offset: 0,
              //       color: "red", // 0%处的颜色为红色
              //     },
              //     {
              //       offset: 1,
              //       color: "blue", // 100%处的颜色为蓝
              //     },
              //   ],
              // },
              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
              },
            },
          },
        ],
      };

// 线性渐变

// 径向渐变

总结：调色盘的作用遵循就近原则，直接样式 > 局部调色盘 > 全局调色盘 > 主题调色盘

样式

代码：

    var pieData = [
        {
          value: 11231,
          name: "淘宝",
          itemStyle: {
            // 控制标题这一区域的样式
            color: "yellow",
          },
          label: {
            //控制标题的文字样式
            color: "blue",
          },
          emphasis: {
            itemStyle: {
              color: "pink",
            },
            label: {
              color: "black",
            },
          },
        },
        {
          value: 22673,
          name: "京东",
        },
        {
          value: 6123,
          name: "唯品会",
        },
        {
          value: 8989,
          name: "1号店",
        },
        {
          value: 6700,
          name: "聚美优品",
        },
      ];

    var option = {
        // color: ["red", "green", "blue", "purple", "skyblue"], // 全局调色盘
        series: [
          {
            type: "pie", // 饼图并不是一个坐标系，只是要设置series就可
            data: pieData,
            // color: ["pink", "yellow", "black", "orange", "red"], // 局部调色盘
            label: {
              show: true, // 显示文字
              // formatter: "hehe", // 决定文字显示的内容
              formatter: function (arg) {
                console.log(arg);
                return (
                  arg.name + "平台" + arg.value + "元\n" + arg.percent + "%"
                );
              },
            },
            // radius: 20, // 饼图的半径
            // radius: "20%", // 百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
            // radius: ["50%", "75%"], // 第0个元素代表的是内圆的半径，第1个元素外圆的半径
            // roseType: "radius", // 南丁格尔图，饼图的每一个区域的半径是不同的
            // selectedMode: "single", // 选中的效果，能够将选中的区域偏离圆点一小段距离
            selectedMode: "mutiple",
            selectedOffset: 20, //选中偏移量
          },
        ],
      };

自适应

代码实现：

  <body>
    <div style="height: 400px; border: 1px solid red"></div>
    <script>
      // init方法有两个参数，第一个参数是一个dom节点，第二个参数，代表你需要使用那一套主题
      // 默认内置了两套主题，light dark
      var mCharts = echarts.init(document.querySelector("div"), "dark");
      var xDataArr = [
        "张三",
        "李四",
        "王五",
        "闰土",
        "小明",
        "茅台",
        "二妞",
        "大强",
      ];
      var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86];
      var option = {
        title: {
          text: "成绩",
          link: "http://www.itcast.cn",
          textStyle: {
            color: "blue",
          },
        },
        xAxis: {
          type: "category", // 类目轴
          data: xDataArr,
        },
        yAxis: {
          type: "value", // 数值轴
        },
        series: [
          {
            name: "语文",
            type: "bar",
            data: yDataArr,
          },
        ],
      };
      // 步骤5：将配置项设置给 echarts 实例对象
      mCharts.setOption(option);
      //监听window窗口大小变化的事件
      // window.onresize = function () {
      //   // console.log("window.onresize...");
      //   mCharts.resize();
      // };
      // 简写
      window.onresize = mCharts.resize();
    </script>
  </body>