分享7个常用的echarts示例

Others 2021-11-18 09:12:48 views: null

1、对于位置不够显示的坐标值，使用斜显示

“xAxis>axisLabel>rotate”设置倾斜角度：

xAxis: {
  type: 'category',
  axisLabel: {
    color: '#b8e8fd',
    interval: 0,
    rotate: 30
  },
  axisLine: {
    lineStyle: {
      color: '#8dc1d8'
    }
  },
  axisTick: {
    show: false
  },
  data: totalValueData.xData
}

2、对于坐标值比较长的名称，使用换行显示

“xAxis>axisLabel>formatter”设置换行格式：

formatter: function(params) {
  var newParamsName = ""; // 最终拼接成的字符串
  var paramsNameNumber = params.length; // 实际标签的个数
  var provideNumber = 4; // 每行能显示的字的个数
  var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
  /**
   * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
   */
  // 条件等同于rowNumber>1
  if (paramsNameNumber > provideNumber) {
    /** 循环每一行,p表示行 */
    for (var p = 0; p < rowNumber; p++) {
      var tempStr = ""; // 表示每一次截取的字符串
      var start = p * provideNumber; // 开始截取的位置
      var end = start + provideNumber; // 结束截取的位置
      // 此处特殊处理最后一行的索引值
      if (p == rowNumber - 1) {
        // 最后一次不换行
        tempStr = params.substring(start, paramsNameNumber);
      } else {
        // 每一次拼接字符串并换行
        tempStr = params.substring(start, end) + "\n";
      }
      newParamsName += tempStr; // 最终拼成的字符串
    }
  } else {
    // 将旧标签的值赋给新标签
    newParamsName = params;
  }
  //将最终的字符串返回
  return newParamsName
}

3、对于坐标值超长的名称，使用省略号+移上去显示

“xAxis>axisLabel>formatter”设置省略号格式：

formatter: function(params) {
  var newParamsName = ""; // 最终拼接成的字符串
  params = params.length <= 6 ? params : params.substring(0, 4) + '...';
  var paramsNameNumber = params.length; // 实际标签的个数
  var provideNumber = 7; // 每行能显示的字的个数
  var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
  /**
   * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
   */
  // 条件等同于rowNumber>1
  if (paramsNameNumber > provideNumber) {
    /** 循环每一行,p表示行 */
    for (var p = 0; p < rowNumber; p++) {
      var tempStr = ""; // 表示每一次截取的字符串
      var start = p * provideNumber; // 开始截取的位置
      var end = start + provideNumber; // 结束截取的位置
      // 此处特殊处理最后一行的索引值
      if (p == rowNumber - 1) {
        // 最后一次不换行
        tempStr = params.substring(start, paramsNameNumber);
      } else {
        // 每一次拼接字符串并换行
        tempStr = params.substring(start, end) + "\n";
      }
      newParamsName += tempStr; // 最终拼成的字符串
    }

  } else {
    // 将旧标签的值赋给新标签
    newParamsName = params;
  }
  //将最终的字符串返回
  return newParamsName
}

增加“tooltip”，使移上去显示详细内容： 

tooltip: {
  trigger: 'axis',
  axisPointer: { // 坐标轴指示器，坐标轴触发有效
    type: 'line' // 默认为直线，可选为：'line' | 'shadow'
  }
}

4、修改折线图区域的渐变色

图片

“series>areaStyle”设置渐变色的数据：

areaStyle: {
  normal: {
    color: new echarts.graphic.LinearGradient(
      0,
      0,
      0,
      1,
      [{
          offset: 0,
          color: 'rgba(21, 144, 229, 1)'
        },
        {
          offset: 1,
          color: 'rgba(21, 144, 229, 0.1)'
        }
      ],
      false
    ),
    shadowColor: 'rgba(21, 144, 229, 0.1)',
    shadowBlur: 10
  }
}

5、饼图中间增加显示内容

“title”设置内容、位置和颜色等：

title: [{
  text: '合计总数',
  x: '29%',
  top: '42%',
  textStyle: {
    color: '#5bb9fc',
    fontSize: size_obj.s12
  }
}, {
  text: totalValue,
  x: '30%',
  top: '50%',
  textStyle: {
    fontSize: size_obj.s14,
    color: '#fff'
  },
}]

6、实现三色仪表盘

全代码如下：

var chartDom01 = document.getElementById('gauge-1');
var myChart01 = echarts.init(chartDom01);
var option01;

option01 = {
  title: {
    text: '溶解氧(mg/L)',
    textStyle: {
      color: '#b8e8fd',
      fontSize: 12,
      fontWeight: 'normal'
    },
    top: 18
  },
  series: [{
    type: 'gauge',
    splitNumber: 1,
    radius: '93%',
    center: ["50%", "52%"],
    startAngle: 180,
    endAngle: 0,
    min: 0,
    max: 50,
    pointer: {
      show: true,
      width: 7,
      length: "60%",
      borderColor: '#000',
      borderWidth: '10',
    },
    axisLine: {
      show: true,
      lineStyle: {
        width: 36,
        color: [
          [0, 'transparent'],
          [0.333333, '#ffb345'],
          [0.343333, 'transparent'],
          [0.666666, '#19aced'],
          [0.676666, 'transparent'],
          [1, '#fa7383']
        ],
        borderColor: '#000',
        borderWidth: '10',
      },
    },
    axisLabel: {
      show: true,
      color: "#fff",
      fontSize: 12,
      distance: -14,
      padding: [30, 0, 0, 0],
      // formatter: function(value) {
      //   return value.toFixed(0);
      // },
    }, //刻度标签。
    axisTick: {
      show: false,

    }, //刻度样式            
    splitLine: {
      show: false,
      length: "28%",
      lineStyle: {
        color: "#fff",
        width: 2,
      },
    }, //分隔线样式
    detail: {
      show: true,
      formatter: ['{a|溶解氧}', '{value}'].join('\n'),
      fontSize: 20,
      color: '#15cd96',
      width: '100%',
      height: '-320%',
      padding: [-300, 0, 0, 0],
      rich: {
        a: {
          color: '#fff',
          fontSize: 12,
          padding: [10, 0, 10, 0],
        }
      }
    },
    title: {
      show: false
    },
    data: [{
      value: 2.77
    }]
    // data: DOData
  }]
};
myChart01.clear();
option01 && myChart01.setOption(option01);

7、实现数据定时切换，适合多数据无法全显示情况

全代码如下：

var x_allData = ['晗宝SVANA的小店1', '晗宝SVANA的小店2', '晗宝SVANA的小店3', '晗宝SVANA的小店4', '晗宝SVANA的小店5', '晗宝SVANA的小店6', '晗宝SVANA的小店7', '晗宝SVANA的小店8', '晗宝SVANA的小店9', '晗宝SVANA的小店10', '晗宝SVANA的小店11', '晗宝SVANA的小店12'];
var y_allData = [535, 452, 348, 214, 119, 200, 352, 148, 247, 150, 250, 180];
var xData, yData;

// 初始化
xData = x_allData.slice(0, 5);
yData = y_allData.slice(0, 5);
updateChart(xData, yData)

// 循环切换数据
var n = Math.ceil(x_allData.length / 5); // 向上取整
var cur = 2,
  start, end;
var timer = setInterval(function() {
  if (cur > n) {
    cur = 1;
  };
  start = (cur - 1) * 5;
  end = cur * 5;
  xData = x_allData.slice(start, end);
  yData = y_allData.slice(start, end);
  updateChart(xData, yData);
  cur++;
  console.log(cur)
}, 3000);
// 更新图表
function updateChart(xData, yData) {
  var myChart_sxyy = echarts.init(document.getElementById('sxyy'));
  var option_sxyy = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: 0,
      top: '5%',
      containLabel: true
    },
    xAxis: {
      show: false,
      type: 'value'
    },
    yAxis: [{
      type: 'category',
      inverse: true,
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
          margin: 12,
          fontSize: 12,
          lineHeight: 15
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      data: xData
    }, {
      type: 'category',
      inverse: true,
      axisTick: 'none',
      axisLine: 'none',
      show: true,
      axisLabel: {
        textStyle: {
          color: '#ffffff',
          fontSize: 12
        },
        formatter: function(value) {
          return value.toLocaleString();
        },
      },
      data: yData
    }],
    series: [{
        name: '预约量',
        type: 'bar',
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [{
                  offset: 0,
                  color: 'rgba(57,89,255, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(46,200,207,1)'
                }
              ],
              false
            )
          },
        },
        barWidth: 15,
        data: yData
      },
      {
        name: '最大值',
        type: 'bar',
        barWidth: 15,
        barGap: '-100%',
        data: [1350, 1350, 1350, 1350, 1350],
        itemStyle: {
          normal: {
            color: 'rgba(24,31,68,1)',
            barBorderRadius: 30,
          }
        },
      },
    ]
  };
  myChart_sxyy.setOption(option_sxyy, true);
}

 

Guess you like

Origin blog.csdn.net/king0964/article/details/121361149
Recommended
LFOSSA Yuanlaisusu Open Course | Mastering the Cloud Native Future: Comprehensive Guide to CNCF Certification and Exam Preparation Tips
Ranking
C++ Basic Syntax
bootstrapTable hides a column based on a condition
Why is reentrant lock recommended instead of Synchronized when dynamic high concurrency?
hexo create a blog
[Fully open source and non-encrypted version] Imitation of the eighth district distribution/online signature/multiple sets of download templates/APP distribution hosting/APP packaging and packaging
Polymerization combination
https://www.flysnow.org/2017/05/06/go-in-action-go-log.html
From the perspective of Flutter and the front-end, talk about how to ensure UI fluency under the single-threaded model
nginx-301, 302 redirect
Geolocation by IP Address in ASP.NET
Daily
More
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(31)

Code World

© 2018 codetd.com