526互联

echarts 图

发布时间 2023-12-11 22:22:02作者: 朱呀朱~

  • ECHARTS 官网：Examples - Apache ECharts

  • ECHARTS 官网找想要的图，然后打开：

  • 右边是可视化的图形显示，左边是：

    image-20231206160140816

    • 代码编辑：只有内含的属性配置，可以在里面编写属性，然后即刻运行在右侧显示
    • 完整代码：显示右侧图形的整个 vue 代码，拿来直接用
    • 配置项：可以点击查看每一个属性的相关信息

  • 现仅提供折线图的 echarts 图代码供回顾

    • line-chart.vue：

      <template>
  <div ref="line-chart" style="height: 800px; width: 1000px"></div>
</template>

<script lang="js">
import * as echarts from "echarts";

export default {

  name: "line-chart",
  componentName: "lineChart",
  components: {},
  props: {
    animation: Boolean,
    axisPointer: Object,
    xAxisStyle: Object,
    yAxis: Object,
    series: Object,
    grid: Object,
    show: Boolean,
    orient: String,
    fontSize: Object,
    top: String,
    left: String,
    itemGap: Object
  },
  data() {
    return {};
  },
  computed: {},
  created() {
  },
  mounted() {
    this.init()
  },
  methods: {

    init() {

      let myChart = echarts.init(this.$refs["line-chart"])

      const option = {
        // 动画
        animation: this.animation,
        // 触发类型：坐标轴触发
        tooltip: {
          trigger: 'axis',
        },
        axisPointer: this.axisPointer,
        // 图例组件
        legend: {
          show: this.show,
          type: 'scroll',
          orient: this.orient,
          textStyle: {
            fontSize: this.fontSize
          },
          top: this.top,
          left: this.left,
          itemGap: this.itemGap
        },
        grid: this.grid,
        xAxis: this.xAxisStyle,
        yAxis: this.yAxis,
        // 点数据
        series: this.series,
      };
      myChart.setOption(option);
    }
  }
}
</script>

    • line-widget.vue：

      <template>
  <line-chart
      :animation="animation"
      :axisPointer="axisPointer"
      :xAxisStyle="xAxisStyle"
      :yAxis="yAxis"
      :series="series"
      :grid="grid"
      :show="show"
      :orient="orient"
      :fontSize="fontSize"
      :top="top"
      :left="left"
      :itemGap="itemGap">
  </line-chart>
</template>
<script setup>
import {ref} from 'vue';
import LineChart from "./line-chart.vue";

const animation = ref(true);

const axisPointer = ref({
  link: {
    xAxisIndex: "null", // all或空
  },
})

// const xAxis = ref(["2023-01-01", "2023-01-02", "2023-01-03", "2023-01-04", "2023-01-05", "2023-01-06", "2023-01-07", "2023-01-08", "2023-01-09", "2023-01-10", "2023-01-11", "2023-01-12"]);
const xAxis = ref(["2023-01-01", "2023-01-02", "2023-01-03", "2023-01-04", "2023-01-05", "2023-01-06", "2023-01-07", "2023-01-08", "2023-01-09", "2023-01-10"]);

const xAxisStyle = ref([
  {
    gridId: 0,
    id: 0,
    type: "category",
    data: xAxis,
    // 坐标轴两边留白策略
    boundaryGap: false,
    // x坐标轴线显示且红色
    axisLine: {
      show: true,
      lineStyle: {
        color: '#ad0a10',
      },
    },
    // 坐标轴刻度相关
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: false, // 坐标轴刻度标签文本
    },
    textStyle: {
      fontSize: 14 // 刻度文本大小
    },
  },
  {
    gridId: 1,
    id: 1,
    type: "category",
    data: xAxis,
    boundaryGap: false,
    axisLine: {
      // show: true, // 仅value默认不显示
      lineStyle: {
        color: '#ad0a10',
      },
    },
    axisTick: {
      show: true,
      inside:true,
    },
    axisLabel: {
      show: true, // 轴数据的显示
      interval: 0, // 强制显示所有 —— 数少的时候，不重叠也会隐藏
      hideOverlap: true, // 隐藏重叠 —— 数多的时候
      // showMaxLabel: true, // 优先级小于隐藏重叠 —— 数少的时候
      // showMinLabel: true, // 优先级小于隐藏重叠
    },
    // x轴数据高亮显示
    axisPointer: {
      label: {
        show: true,
      }
    }
  }
]);

const nameLocation = ref('center');
const symbol = ref(['none', 'arrow']);
const yFontSize = ref(14);
const yType = ref('value');
const yZxShow = ref(true); // 是否显示轴线
const yKdShow = ref(true); // 是否显示刻度

const scale = ref(false);

const yAxis = ref([
  {
    gridId: 0,
    id: 0,
    name: '注\n入\n时\n间', // 文本(圆圈感叹号：如果想从上到下读取y轴名称，那就每个字之间加一个\n，并且更改nameRotate旋转角度为0)
    nameLocation: nameLocation,

    // 坐标轴名字旋转角度
    nameRotate: '0',

    // 坐标轴名称与轴线之间的距离，文本
    nameGap: 30,

    // y轴名称的文字设置，文本
    nameTextStyle:{
      fontSize: yFontSize
    },

    // 不强制要求有0
    scale: scale,

    // 数值轴，适用于连续数据
    type: yType,

    // Y 轴相对于默认位置的偏移，在相同的 position 上有多个 Y 轴的时候有用。
    offset: 0,

    //Y轴在图的左边，下拉选择
    position: 'left',

    // 坐标轴轴线的相关设置
    axisLine: {
      // 显示坐标轴
      show: yZxShow,
      // 只在头部显示箭头，下拉可配置
      symbol: symbol,

      // y轴的颜色，轴（文字颜色默认继承、刻度颜色默认继承）
      lineStyle: {
        color: '#ff0000'
      },
    },

    // y轴的刻度
    axisTick: {
      show: yKdShow,
      inside: yKdShow,
    },
    // 轴刻度的显示数据
    axisLabel: {
      margin: 8, // 刻度数值距离
      show: yZxShow,
    },
  },
  {
    gridId: 0,
    id: 1,
    name: '井口温度',
    nameLocation: nameLocation,
    nameRotate: '90',
    nameGap: 30,
    nameTextStyle:{
      fontSize: yFontSize
    },
    scale: scale,
    offset: 80,
    position: 'left',
    axisLine: {
      show: yZxShow,
      symbol: symbol,
      lineStyle: {
        color: '#ff9900'
      },
    },
    axisTick: {
      show: yKdShow,
      inside: yKdShow,
    },
    type: yType,
    axisLabel: {
      show: yZxShow,
    },
    splitLine:{
      show: false,
    },
  },
  {
    gridId: 0,
    id: 2,
    name: '泵频率',
    nameLocation: nameLocation,
    nameRotate: 270,
    nameGap: 30,
    nameTextStyle:{
      fontSize: yFontSize
    },
    scale: scale,
    offset: 0,
    position: 'right',
    axisLine: {
      show: yZxShow,
      symbol: symbol,
      lineStyle: {
        color: '#26c9a3'
      },
    },
    axisTick: {
      show: yKdShow,
      inside: yKdShow,
    },
    type: yType,
    axisLabel: {
      show: yZxShow,
    },
    splitLine:{
      show: false,
    },
  },
  {
    gridId: 1,
    id: 3,
    name: '生产时间',
    nameLocation: nameLocation,
    nameRotate: 90,
    nameGap: 30,
    nameTextStyle:{
      fontSize: yFontSize
    },
    scale: scale,
    offset: 0,
    position: 'left',
    axisLine: {
      show: yZxShow,
      symbol: symbol,
      lineStyle: {
        color: '#5fff00'
      },
    },
    axisTick: {
      show: yKdShow,
      inside: yKdShow,
    },
    type: yType,
    axisLabel: {
      show: yZxShow,
    },
    splitLine:{
      show: false,
    },
  },
  {
    gridId: 1,
    id: 4,
    name: '日产液量',
    nameLocation: nameLocation,
    nameRotate: 270,
    nameGap: 30,
    nameTextStyle:{
      fontSize: yFontSize
    },
    scale: scale,
    offset: 0,
    position: 'right',
    axisLine: {
      show: yZxShow,
      symbol: symbol,
      lineStyle: {
        color: '#3f00ff'
      },
    },
    axisTick: {
      show: yKdShow,
      inside: yKdShow,
    },
    type: yType,
    axisLabel: {
      show: yZxShow,
    },
    splitLine:{
      show: false,
    },
  },
  {
    gridId: 1,
    id: 5,
    name: '日注水量',
    nameLocation: nameLocation,
    nameRotate: 270,
    nameGap: 30,
    nameTextStyle:{
      fontSize: yFontSize
    },
    scale: scale,
    offset: 80,
    position: 'right',
    axisLine: {
      show: yZxShow,
      symbol: symbol,

      lineStyle: {
        color: '#ff00f2'
      },
    },
    axisTick: {
      show: yKdShow,
      inside: yKdShow,
    },
    type: yType,
    axisLabel: {
      show: yZxShow,
    },
    splitLine:{
      show: false,
    },
  }
]);

const gridLeft = ref('14%');
const gridWidth = ref('80%');
const gridHeight = ref('15%');

const grid = ref([
  {
    id: 0,
    left: gridLeft,
    top: '10%',
    width: gridWidth,
    height: gridHeight
  },
  {
    id: 1,
    left: gridLeft,
    top: '28%',
    width: gridWidth,
    height: gridHeight
  },
]);

const smooth = ref(0.1);
const sType = ref('line');
const showSymbol = ref(false);
const showGL = ref(true); // 是否关闭高光

const series = ref([
  {
    type: sType,
    name: '流压(单位)',
    smooth: smooth, // 平滑度
    xAxisId: 0, // 和gridIndex同（不设置的话就是默认的0）
    yAxisId: 0,

    itemStyle:{
      // 没有默认继承，需要配置
      color: '#ff0000'
    },
    data: [3,4.3,5,6,6,8,7.5,2,3,4],
    // 是否显示折线处的点
    showSymbol: showSymbol,
    //   高亮
    emphasis: {
      disabled: showGL,
      focus: 'series',
    },
  },
  {
    type: sType,
    name: '含水(单位)',
    smooth: smooth,
    xAxisId: 0, // 要和gridIndex统一
    yAxisId: 1,
    itemStyle:{
      color: '#ff9900'
    },
    data: [4,4.1,5.5,2.1,3.2,8.4,2.55,2,2.3,2],
    showSymbol: showSymbol,
    emphasis: {
      disabled: showGL,
      focus: 'series',
    },
  },
  {
    type: sType,
    name: '泵频率(单位)',
    smooth: smooth,
    xAxisId: 0,
    yAxisId: 2,
    itemStyle:{
      color: '#26c9a3'
    },
    data: [19,19,19.5,18.1,18.2,18.4,19.55,19,19.3,19],
    showSymbol: showSymbol,
    emphasis: {
      disabled: showGL,
      focus: 'series',
    },
  },
  {
    type: sType,
    name: '油压-生产时间(单位)',
    smooth: smooth,
    xAxisId: 1, // 要和gridIndex统一
    yAxisId: 3,
    itemStyle:{
      color: '#5fff00'
    },
    data: [13,14.3,12,11.6,12,11,12.5,12,10,11],
    showSymbol: showSymbol,
    emphasis: {
      disabled: showGL,
      focus: 'series',
    },
  },
  {
    type: sType,
    name: '日产液量(单位)',
    smooth: smooth,
    xAxisId: 1, // 要和gridIndex统一
    yAxisId: 4,
    itemStyle:{
      color: '#3f00ff'
    },
    data: [19,19,19.5,18.1,18.2,18.4,19.55,19,19.3,19],
    showSymbol: showSymbol,
    emphasis: {
      disabled: showGL,
      focus: 'series',
    },
  },
  {
    type: sType,
    name: '日注水量(单位)',
    smooth: smooth,
    xAxisId: 1, // 要和gridIndex统一
    yAxisId: 5,
    itemStyle:{
      color: '#ff00f2'
    },
    data: [12,12,12.5,12.4,12.2,12.4,12.15,12,12.3,12],
    showSymbol: showSymbol,
    emphasis: {
      disabled: showGL,
      focus: 'series',
    },
  },
]);

const show =ref(true); // 开关
const orient =ref('horizontal'); // vertical
const fontSize =ref(14); // 开关
const top = ref('5%');
const left = ref('10%');
const itemGap = ref(100);

</script>

  • 介绍：

    • 此折线图是实现了：有多个 grid，每个 grid 有各自的一个 x 轴和若干个 y 轴，若干个 y 轴公用一个 x 轴

    • 图示：

      image-20231206171012560