首页 > 其他分享 >echarts 图

echarts 图

时间：2023-12-11 22:24:07浏览次数：36  
标签：01 const show type 2023 ref echarts

  • 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

标签：01,const,show,type,2023,ref,echarts
From： https://www.cnblogs.com/zhu-ya-zhu/p/17895733.html

相关文章

  • 软件测试/人工智能|Python数据可视化神器pyecharts教程（一）
    前言在很多时候，枯燥的数字并不能很直观的展示地域的差别，比如一个企业，想要分析产品在国内的销售情况，报表可能并不能最直接的展示差异，而一个结合地图的展示，就会直观得多，更便于大家去看到差距，更利于决策。当然，除了做商业决策，将数据与地图结合，也更便于我们展示诸如人口密度，经济总量等数......
  • 软件测试/人工智能|Python数据可视化神器pyecharts教程（二）
    前言上一篇文章，我们介绍了如何使用pyecharts展示带地图的数据分析结果，并且实际绘制了省份图和全国城市图，用于展示数据。本文我们继续来使用pyecharts绘制以地图为基础的图像。绘制分段图但是我们在绘制全国的图形时，没有考虑考虑到将不同级别的数据进行分层，比如每一段的颜色不一......
  • 软件测试/人工智能|Python数据可视化神器pyecharts教程（三）
    前言前面两篇文章，我们主要介绍了绘制基本的地图以及数据展示图，其实我们可以在地图上绘制更多类型的图形，本文就来继续介绍在地图的基础上进行我们的数据可视化工作。绘制轨迹图每年春运，都是大部分的人从北上广深等发达地区回到广大的中西部地区，春节之后，再从广大的中西部地区回到......
  • 软件测试/人工智能|Python数据可视化神器pyecharts教程（一）
    前言在很多时候，枯燥的数字并不能很直观的展示地域的差别，比如一个企业，想要分析产品在国内的销售情况，报表可能并不能最直接的展示差异，而一个结合地图的展示，就会直观得多，更便于大家去看到差距，更利于决策。当然，除了做商业决策，将数据与地图结合，也更便于我们展示诸如人口密度，经济总量......
  • echarts 绘图 的 代码片段
    软件版本：eCharts5.4.3vue.js3.2.36ElementPlus2.3.12-- 序章官网：https://echarts.apache.org/zh/index.html快速上手：https://echarts.apache.org/handbook/zh/get-started/下载方式1：jsDelivrCDNhttps://www.jsdelivr.com/package/npm/echarts<scriptsrc="https:/......
  • ECharts饼图颜色设置的4种方式总结
    信铁寒胜实测：用了下面第三种方式，改了饼状图的颜色 ECharts饼状图颜色设置教程方法一：在 series 内配置饼状图颜色方法二：在 option 内配置饼状图颜色方法三：在 data 内配置饼状图颜色方法四：配置ECharts饼状图随机颜色Charts饼状图中的每个扇形颜色其实都可以自......
  • echarts饼图实现图例翻页
    实现步骤：1、echarts安装npminstallecharts2、页面引入import*asechartsfrom'echarts'3、容器<divref="talentDemandChart"style="width:350px;height:250px;text-align:center;position:absolute;left:10px;top:70px;"></div......
  • echarts中自定义tooltip的换行问题
    echarts中自定义tooltip的换行问题使用extraCssText属性 在官网文档中描述tooltip:{trigger:'item',show:true,formatter:'{b}:{c}({d}%)',extraCssText:'max-width:200px;white-space:pre-wrap;wor......
  • echarts：ReferenceError: echarts is not defined
    echarts资源引用正常，但却出现定义报错。原因：引入echarts.js位置不正确，导致未引入js时，却使用了echarts。解决：先引入echarts.js再使用建议将引入放在body后，否则可能会出现>TypeError:Cannotreadpropertiesofnull(reading'getAttribute')......
  • MAUI中使用ECharts数据可视化显示
    一、ECharts简介ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，ECharts遵循Apache-2.0开源协议，免费商用。官网：https://echarts.apache.org/zh/index.html示例论坛：https://www.makeapie.cn/echar......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99