首页 > 其他分享 >echrts 折线图实现数据排名展示

echrts 折线图实现数据排名展示

时间：2024-08-14 10:52:40浏览次数：4  
标签：false 展示 color true show value echrts 折线图 type

效果：

 

 接口结构：

{
    "data": [
        {
            "tdtRank": 1,
            "tranTransferOvertimeRate": 0.0211,
            "outtranOpOvertimeRate": 0.0041,
            "siteDispSignOvertimeRate": 0.0190,
            "lastTranOptOvertimeRate": 0.0035,
            "sendOvertimeRate": 0.036800,
            "statDateStr": "0610",
            "manageAreaName": null,
            "ukOvertimeRate": 0.0604,
            "recDispTimeSuccessRate": 0.869300,
            "manageAreaCode": null
        },
        {
            "tdtRank": 1,
            "tranTransferOvertimeRate": 0.0199,
            "outtranOpOvertimeRate": 0.0019,
            "siteDispSignOvertimeRate": 0.0221,
            "lastTranOptOvertimeRate": 0.0039,
            "sendOvertimeRate": 0.035000,
            "statDateStr": "0611",
            "manageAreaName": null,
            "ukOvertimeRate": 0.0547,
            "recDispTimeSuccessRate": 0.871800,
            "manageAreaCode": null
        }
    ],
    "message": "操作成功",
    "statusCode": 200,
    "status": true
}

 

line组件配置

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref, reactive, defineProps } from 'vue';
import { useRouter } from 'vue-router';
import { formatPercent } from '@/utils/util';
import { withinCompletionRate, withinCompletionRateDetail } from '@/api/ageing';
import dayjs from 'dayjs';

const props = defineProps({
  type: {
    type: Number,
    default: 0
  }
});
const router = useRouter();
// @ts-ignore
let myChart = null;
const chartRef = ref();

const state = reactive({
  chartConfig: {}
});

const getAreaStyle = (type = 0) => {
  return {
    color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: type ? 'rgba(3, 183, 217, 0.3)' : 'rgba(16, 66, 223, 0.3)' // 100% 处的颜色
        },
        {
          offset: 1,
          color: '#FFFFFF' //   0% 处的颜色
        }
      ],
      global: false // 缺省为 false
    }
  };
};

const initECharts = (res: any) => {
  const colors = [
    '#ED99B4',
    '#B2A0DF',
    '#6F8DEB',
    '#888EA1',
    '#E79566',
    '#66C2AB',
    '#03B7D9',
    '#E79566',
    '#66C2AB',
    '#8C71CF',
    '#C52906',
    '#588C03'
  ];
  if (chartRef.value) {
    // @ts-ignore
    if (!myChart) {
      myChart = echarts.init(chartRef.value);
    }
    let series = [];
    let labels = [];
    let dates = [];
    let tooltip = {};

    let pointStyle = {
      borderColor: "#ea6f21",
      color: "#fff",
      borderWidth: 2,
    };
    let labelStyle = {
      show: true,
      position: "inside",
      lineHeight: 20,
      borderRadius: 50,
      backgroundColor: "rgba(105, 175, 255, 1)",
      borderColor: "rgba(105, 175, 255, 1)",
      borderWidth: "1",
      padding: [0, 7],
      color: "#fff",
      fontSize: 12,
      fontWeight: "normal",
      formatter: function () {
        return 1;
      },
    };
    let total = res.map((item: object) => {
      return {
        num: 100,
        value: item.tdtRank,
      }
    })

    let seriesData = [];
    total.forEach((item, index) => {
      let ob = {
        value: item.num,
        itemStyle: pointStyle,
        label: labelStyle,
      };
      if (total[index].value != 1) {
        ob.itemStyle = {
          borderColor: "#ea6f21",
          color: "#ea6f21",
          borderWidth: 3,
        };
        ob.label = {
          show: true,
          position: "inside",
          lineHeight: 20,
          backgroundColor: "red",
          borderRadius: 50,
          borderColor: "red",
          borderWidth: "1",
          padding: [0, 7],
          color: "#fff",
          fontSize: 12,
          fontWeight: "normal",
          formatter: function (value) {
            return item.value;
          },
        };
      }
      seriesData.push(ob);
    });

    series = [
      {
        name: '交件',
        type: 'line',
        symbolSize: 0,
        smooth: true,
        xAxisIndex: 1,
        yAxisIndex: 3,
        data: res.map((item: object) => formatPercent(item.sendOvertimeRate, 1, false))
      },
      {
        name: '首中心',
        type: 'line',
        symbolSize: 0,
        smooth: true,
        xAxisIndex: 1,
        yAxisIndex: 3,
        data: res.map((item: object) => formatPercent(item.outtranOpOvertimeRate, 1, false))
      },
      {
        name: '运输',
        type: 'line',
        symbolSize: 0,
        smooth: true,
        xAxisIndex: 1,
        yAxisIndex: 3,
        data: res.map((item: object) => formatPercent(item.tranTransferOvertimeRate, 1, false))
      },
      {
        name: '清仓后到件',
        type: 'line',
        symbolSize: 0,
        smooth: true,
        xAxisIndex: 1,
        yAxisIndex: 3,
        data: res.map((item: object) => formatPercent(item.ukOvertimeRate, 1, false))
      },
      {
        name: '末中心',
        type: 'line',
        symbolSize: 0,
        smooth: true,
        xAxisIndex: 1,
        yAxisIndex: 3,
        data: res.map((item: object) => formatPercent(item.lastTranOptOvertimeRate, 1, false))
      },
      {
        name: '派签',
        type: 'line',
        symbolSize: 0,
        smooth: true,
        xAxisIndex: 1,
        yAxisIndex: 3,
        data: res.map((item: object) => formatPercent(item.siteDispSignOvertimeRate, 1, false))
      },
      {
        name: '时效达成率',
        type: 'line',
        symbolSize: 0,
        smooth: true,
        xAxisIndex: 1,
        yAxisIndex: 2,
        data: res.map((item: object) => formatPercent(item.recDispTimeSuccessRate, 1, false))
      },
      {
        name: '排名',
        type: "line",
        xAxisIndex: 0,
        yAxisIndex: 0,
        showAllSymbol: true,
        hoverAnimation: false, // 悬浮的动画加上
        smooth: true, // 可选，平滑线
        symbolSize: 10,
        lineStyle: {
          normal: {
            color: "#eee",
            width: 35,
          },
          emphasis: {
            color: "#eee",
            focus: 'series' // 鼠标悬浮时，保持线条显示
          }
        },
        tooltip: {
          show: false,
        },
        data: seriesData,
      },
    ];

    tooltip = {
      show: true,
      trigger: 'axis',
      backgroundColor: 'rgba(0,0,0,0.7)',
      triggerOn: 'click',
      textStyle: {
        color: '#ffffff',
        fontSize: 12
      },
      borderColor: 'transparent',
      valueFormatter: (value: number | string) => value + '%'
    };
    dates = res.map((item: object) => item.statDateStr);
    labels = series.map((item: object) => item.name);
    const option = {
      color: colors,
      title: {
        show: false,
        text: '时效达成率及环节未达成影响趋势',
        left: 10,
        textStyle: {
          color: '#303133',
          fontWeight: 500
        },
        padding: [5, 10, 40, 0]
      },
      grid: [
        // 配置第一个折线图的位置
        {
          left: 10,
          right: 10,
          top: "10%",
          bottom: '20%',
          height: "30",
        },
        // 配置第二个折线图位置
        {
          left: 10,
          right: 10,
          top: "22%",
          height: "160",
          containLabel: true
        },
      ],
      legend: {
        data: labels,
        bottom: 10,
        left: 30,
        right: 30,
        icon: 'rect',
        itemWidth: 8,
        itemHeight: 2,
        selected: {}
      },
      tooltip: tooltip,
      // 将上下两个tootip合成一个
      axisPointer: {
        link: { xAxisIndex: "all" },
      },
      xAxis: [
        {
          type: "category",
          scale: true,
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            show: false,
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            show: false,
          },
          data: dates
        },
        {
          gridIndex: 1,
          type: "category",
          scale: true,
          axisLabel: {
            fontSize: 10,
          },
          axisTick: {
            alignWithLabel: true,
          },
          splitLine: {
            show: false,
          },
          data: dates
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            show: false,
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            show: false,
          },
        },
        {
          type: "value",
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            show: false,
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            show: false,
          },
        },
        {
          type: "value",
          scale: true,
          gridIndex: 1,
          // min: 'dataMin',
          min: '0',
          max: 'dataMax',
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            show: false,
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            show: false,
          },
          splitNumber: 3,
        },
        {
          type: 'value',
          scale: true,
          gridIndex: 1,
          max: function (value: object) {
            return value.max + 8;
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            show: false,
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            show: false,
          },
          splitNumber: 3,
        },
      ],
      dataZoom: [
        {
          type: 'inside',
          startValue: dates.length > 7 ? dates[dates.length - 7] : '',
          xAxisIndex: [0, 1], // 显示 0 1 的数据，这个要加，不加的话，悬浮提示就会出问题
        },
        {
          show: dates.length > 7,
          startValue: dates.length > 7 ? dates[dates.length - 7] : '',
          xAxisIndex: [0, 1], // 显示 0 1 的数据，这个要加，不加的话，悬浮提示就会出问题
          brushSelect: false,
          type: 'slider',
          bottom: '60',
          zoomLock: false,
          backgroundColor: '#f5f5f5',
          dataBackground: {
            lineStyle: {
              color: '#f5f5f5'
            },
            areaStyle: {
              color: '#f5f5f5'
            }
          },
          fillerColor: '#ddd',
          borderColor: '#f5f5f5',
          handleSize: '0%',
          moveHandleSize: 0,
          showDetail: false,
          height: 8
        }
      ],
      series: series
    };
    // @ts-ignore
    state.chartConfig = option;
    myChart && myChart.setOption(state.chartConfig);
    myChart.on('legendselectchanged', function (params: any) {
      let option = state.chartConfig;
      option.legend.selected[params.name] = true;
      myChart.setOption(option);
    });
  }
};

const query = () => {
  const params = {};
  let api = withinCompletionRateDetail;
  const { warnDate, kpiManageAreaCode, kpiZbCode } = router.currentRoute.value.query;
  params.manageAreaCode = kpiManageAreaCode;
  params.typeOfInAndOut = kpiZbCode === 'line_achieve_in' ? 1 : 2; // 进出港类型： 0不区分， 1进港，2 出港
  params.statDateStr = dayjs(warnDate).format('YYYY-MM-DD');
  api(params).then((res: any) => {
    if (res.length) {
      initECharts(res);
    }
  });
};

onMounted(() => {
  // if (self != top) {
  //   myChart &&
  //     myChart.resize({
  //       width: 320,
  //       height: 300
  //     });
  // }
  query();
});
</script>

<template>
  <div ref="lineBox" class="line-box">
    <div class="title">时效达成率及环节未达成影响趋势</div>
    <div ref="chartRef" class="line-echarts"></div>
  </div>
</template>

<style scoped lang="scss">
.line-box {
  background: #fff;
  border-radius: 8px;
  color: #303133;
  padding-top: 16px;

  .title {
    font-size: 17px;
    font-weight: 600;
    padding-left: 16px;
  }

  .line-echarts {
    width: 100%;
    height: 300px;
  }
}
</style>

 

option全部代码

option = {
  color: [
    "#ED99B4",
    "#B2A0DF",
    "#6F8DEB",
    "#888EA1",
    "#E79566",
    "#66C2AB",
    "#03B7D9",
    "#E79566",
    "#66C2AB",
    "#8C71CF",
    "#C52906",
    "#588C03",
  ],
  title: {
    show: false,
    text: "时效达成率及环节未达成影响趋势",
    left: 10,
    textStyle: { color: "#303133", fontWeight: 500 },
    padding: [5, 10, 40, 0],
  },
  grid: [
    { left: 10, right: 10, top: "10%", bottom: "20%", height: "30" },
    { left: 10, right: 10, top: "22%", height: "160", containLabel: true },
  ],
  legend: {
    data: [
      "交件",
      "首中心",
      "运输",
      "清仓后到件",
      "末中心",
      "派签",
      "时效达成率",
      "排名",
    ],
    bottom: 10,
    left: 30,
    right: 30,
    icon: "rect",
    itemWidth: 8,
    itemHeight: 2,
    selected: {},
  },
  tooltip: {
    show: true,
    trigger: "axis",
    backgroundColor: "rgba(0,0,0,0.7)",
    triggerOn: "click",
    textStyle: { color: "#ffffff", fontSize: 12 },
    borderColor: "transparent",
    valueFormatter: {
      _custom: {
        type: "function",
        display:
          '<span style="opacity:.5;">function</span> valueFormatter(value)',
        tooltip: '<pre>(value) => value + "%"</pre>',
        _reviveId: 1417,
      },
    },
  },
  axisPointer: { link: { xAxisIndex: "all" } },
  xAxis: [
    {
      type: "category",
      scale: true,
      axisLabel: { show: false },
      axisTick: { show: false },
      axisLine: { show: false },
      splitLine: { show: false },
      data: ["0610", "0611"],
    },
    {
      gridIndex: 1,
      type: "category",
      scale: true,
      axisLabel: { fontSize: 10 },
      axisTick: { alignWithLabel: true },
      splitLine: { show: false },
      data: ["0610", "0611"],
    },
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: { show: false },
      axisTick: { show: false },
      axisLine: { show: false },
      splitLine: { show: false },
    },
    {
      type: "value",
      axisLabel: { show: false },
      axisTick: { show: false },
      axisLine: { show: false },
      splitLine: { show: false },
    },
    {
      type: "value",
      scale: true,
      gridIndex: 1,
      min: "0",
      max: "dataMax",
      axisLabel: { show: false },
      axisTick: { show: false },
      axisLine: { show: false },
      splitLine: { show: false },
      splitNumber: 3,
    },
    {
      type: "value",
      scale: true,
      gridIndex: 1,
      max: {
        _custom: {
          type: "function",
          display: '<span style="opacity:.5;">function</span> max(value)',
          tooltip:
            "<pre>function(value) {\n                return value.max + 8;\n              }</pre>",
          _reviveId: 1418,
        },
      },
      axisLabel: { show: false },
      axisTick: { show: false },
      axisLine: { show: false },
      splitLine: { show: false },
      splitNumber: 3,
    },
  ],
  dataZoom: [
    { type: "inside", startValue: "", xAxisIndex: [0, 1] },
    {
      show: false,
      startValue: "",
      xAxisIndex: [0, 1],
      brushSelect: false,
      type: "slider",
      bottom: "60",
      zoomLock: false,
      backgroundColor: "#f5f5f5",
      dataBackground: {
        lineStyle: { color: "#f5f5f5" },
        areaStyle: { color: "#f5f5f5" },
      },
      fillerColor: "#ddd",
      borderColor: "#f5f5f5",
      handleSize: "0%",
      moveHandleSize: 0,
      showDetail: false,
      height: 8,
    },
  ],
  series: [
    {
      name: "交件",
      type: "line",
      symbolSize: 0,
      smooth: true,
      xAxisIndex: 1,
      yAxisIndex: 3,
      data: [3.7, 3.5],
    },
    {
      name: "首中心",
      type: "line",
      symbolSize: 0,
      smooth: true,
      xAxisIndex: 1,
      yAxisIndex: 3,
      data: [0.4, 0.2],
    },
    {
      name: "运输",
      type: "line",
      symbolSize: 0,
      smooth: true,
      xAxisIndex: 1,
      yAxisIndex: 3,
      data: [2.1, 2],
    },
    {
      name: "清仓后到件",
      type: "line",
      symbolSize: 0,
      smooth: true,
      xAxisIndex: 1,
      yAxisIndex: 3,
      data: [6, 5.5],
    },
    {
      name: "末中心",
      type: "line",
      symbolSize: 0,
      smooth: true,
      xAxisIndex: 1,
      yAxisIndex: 3,
      data: [0.4, 0.4],
    },
    {
      name: "派签",
      type: "line",
      symbolSize: 0,
      smooth: true,
      xAxisIndex: 1,
      yAxisIndex: 3,
      data: [1.9, 2.2],
    },
    {
      name: "时效达成率",
      type: "line",
      symbolSize: 0,
      smooth: true,
      xAxisIndex: 1,
      yAxisIndex: 2,
      data: [86.9, 87.2],
    },
    {
      name: "排名",
      type: "line",
      xAxisIndex: 0,
      yAxisIndex: 0,
      showAllSymbol: true,
      hoverAnimation: false,
      smooth: true,
      symbolSize: 10,
      lineStyle: {
        normal: { color: "#eee", width: 35 },
        emphasis: { color: "#eee", focus: "series" },
      },
      tooltip: { show: false },
      data: [
        {
          value: 100,
          itemStyle: { borderColor: "#ea6f21", color: "#fff", borderWidth: 2 },
          label: {
            show: true,
            position: "inside",
            lineHeight: 20,
            borderRadius: 50,
            backgroundColor: "rgba(105, 175, 255, 1)",
            borderColor: "rgba(105, 175, 255, 1)",
            borderWidth: "1",
            padding: [0, 7],
            color: "#fff",
            fontSize: 12,
            fontWeight: "normal",
            formatter: {
              _custom: {
                type: "function",
                display:
                  '<span style="opacity:.5;">function</span> formatter()',
                tooltip:
                  "<pre>function() {\n            return 1;\n          }</pre>",
                _reviveId: 1419,
              },
            },
          },
        },
        {
          value: 100,
          itemStyle: { borderColor: "#ea6f21", color: "#fff", borderWidth: 2 },
          label: {
            show: true,
            position: "inside",
            lineHeight: 20,
            borderRadius: 50,
            backgroundColor: "rgba(105, 175, 255, 1)",
            borderColor: "rgba(105, 175, 255, 1)",
            borderWidth: "1",
            padding: [0, 7],
            color: "#fff",
            fontSize: 12,
            fontWeight: "normal",
            formatter: {
              _custom: {
                type: "function",
                display:
                  '<span style="opacity:.5;">function</span> formatter()',
                tooltip:
                  "<pre>function() {\n            return 1;\n          }</pre>",
                _reviveId: 1419,
              },
            },
          },
        },
      ],
    },
  ],
};

 

标签：false,展示,color,true,show,value,echrts,折线图,type
From： https://www.cnblogs.com/xiaonanxun/p/18358414

相关文章

  • 沉浸式3D飞行展示，触手可及的天空之旅
    在浩瀚的蓝天之下，飞机以优雅的姿态划破长空，每一次起降、每一次盘旋，都是对速度与科技的完美诠释。而今，随着科技的飞速发展，我们不再仅仅满足于仰望天际的壮丽景象，而是能够借助先进的3D可视化技术，将飞机飞行的每一个细节，每一份震撼，都精准无误地呈现在眼前，开启一场前所未有的视觉盛宴......
  • 24/8/11算法笔记AdaBoost多分类原理展示
    importnumpyasnpfromsklearn.ensembleimportAdaBoostClassifierfromsklearnimportdatasetsfromsklearn.model_selectionimporttrain_test_splitfromsklearnimporttreeimportgraphviz加载数据X,y=datasets.load_iris(return_X_y=True)X_train,X_test......
  • 英伟达不止芯片，Omniverse可以这样用来展示公司风采
    随着2022年生成式AI模型ChatGPT的出现，彻底引爆了人工智能产业，大模型、AIGC、LLM、数字人等话题迅速成为当下热点，也让各行各业更加的期待技术带来的产业变革。比如，在政企客户中，很多人就很关心人工智能（AI）技术能够实现哪些业务创新。 的确，人工智能技术的发展，带来了更多的场景变现......
  • vue-页面高亮展示code代码组件
     在main.js里引用组件importhljsfrom"highlight.js";import"highlight.js/styles/atom-one-dark.css";Vue.directive("highlight",function(el){letblocks=el.querySelectorAll("precode");blocks.forEach((block)......
  • vue+iview-table点击展开展示内容，表格嵌套
    实现如下效果的表格嵌套：点击展开，展示tabs。table的columns里设置展示的属性，然后属性里设置返回一个组件，然后在组件里写嵌套的内容。 <Table:columns="tableColumns":data="tableData"style="width:100%"@on-selection-change="handleSelection"><templ......
  • 微信小程序-如何解决onShareAppMessage转发gif格式图片不展示？【亲测有效】
    1、开发小程序过程中，如果使用gif，在微信开发者工具中是可以正确显示图片的，但是发布之后，在真机上体验就不行了，无法显示分享的图片，对方也无法看到图片。2、查看文档，发现微信小程序分享的时候，自定义的图片类型只支持：PNG，JPG。不能支持，gif。3、如何解决呢？机密也在文档中，亲测有效，完美解......
  • 利用vscode-icons-js在Vue3项目中实现文件图标展示
    背景：在开发文件管理系统或类似的项目时，我们常常需要根据文件类型展示对应的文件图标，这样可以提高用户体验。本文将介绍如何在Vue3项目中利用vscode-icons-js库，实现类似VSCode的文件图标展示效果。先看效果：一、引入vscode-icons-js首先，我们需要安装vscode-icons-js库。......
  • 绘制柱状图和折线图
    importmatplotlib.pyplotaspltimportpandasaspdimportnumpyasnp#数据准备data={'Initialangle':[16,10,4,16,-5,11,10,6,-9,22],'Actualangle':[4,0,-9,2,5,0,2,-9,8,26],'Bendingangle':[-3,-6,-1......
  • 简易秀投票解决方案功能展示与案例分析
    简易秀投票小程序作为一款功能丰富、操作简便的投票工具，其功能案例分析可以从以下几个方面进行：一、功能概述简易秀投票小程序支持多种投票类型和丰富的设置选项，主要包括：1.多样化的投票类型：支持视频投票、音频投票、图文投票、文字投票等多种类型，满足不同场景下的投票需求。2.......
  • 如何使用 Python 进行数据可视化，比如绘制折线图？
    要使用Python进行数据可视化，可以使用matplotlib库来绘制折线图。以下是一个简单的示例代码：首先，确保已安装matplotlib库。可以使用以下命令安装：pipinstallmatplotlib在Python脚本中导入matplotlib库：importmatplotlib.pyplotasplt准备数据，以x和y坐标列表的形式存......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99