echars 多图表开发

月光浇在石子路上

已于 2022-05-10 17:22:05 修改

阅读量243

点赞数

分类专栏： echars 文章标签： echarts javascript 前端

于 2022-05-10 16:20:43 首次发布

本文链接：https://blog.csdn.net/qq_39889855/article/details/124691303

版权

本文详细介绍了如何利用ECharts库进行多图表的开发，包括设置数据、配置选项、交互功能以及如何在JavaScript中整合多个图表，为前端数据可视化提供实用方案。

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

 initBarChart2 () {
      let yData = ['经济科学', '化学', '生物学', '物理学', '电子自控']
      let barchart2 = echarts.init(this.$refs.barchart2);

      var color = [{
        color: '#2EE67D',
        step: 4
      }, {
        color: '#FFD54A',
        step: 5
      }];
      var colors = color.map(({
        color,
        step
      }, i) => {
        return new gradientColor(color, '#ffffff', step);
      });

      //获取两颜色区间渐变色
      function gradientColor (startColor, endColor, step) {
        const startRGB = hexToRgb(startColor), //转换为rgb数组模式
          startR = startRGB.r,
          startG = startRGB.g,
          startB = startRGB.b,
          endRGB = hexToRgb(endColor),
          endR = endRGB.r,
          endG = endRGB.g,
          endB = endRGB.b,
          sR = (endR - startR) / step, //总差值
          sG = (endG - startG) / step,
          sB = (endB - startB) / step;
        var colorSteps = [];
        for (var i = 0; i < step; i++) {
          var hex = rgbToHex('rgb(' + parseInt((sR * i + startR)) + ',' + parseInt((sG * i + startG)) + ',' + parseInt((sB * i + startB)) + ')');
          colorSteps.push(hex);
        }

        function hexToRgb (hex, opacity = 1) {
          return {
            r: parseInt("0x" + hex.slice(1, 3)),
            g: parseInt("0x" + hex.slice(3, 5)),
            b: parseInt("0x" + hex.slice(5, 7)),
            rgb: "rgb(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," + parseInt("0x" + hex.slice(5, 7)) + ")",
            rgba: "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," + parseInt("0x" + hex.slice(5, 7)) + "," + opacity + ")",
          };
        }

        function rgbToHex (color) {
          var rgb = color.split(',')