vue引入Echarts画折线图、平滑曲线图、转化数学公式详解

1 引入Echarts

1.1 安装

使用如下命令通过 npm 安装 ECharts

npm install echarts --save

注:本文安装Echarts版本为:“echarts”: “5.2.1”

1.2 引入

安装完成以后,可以将echarts全部引入,这样一来,我们可以在该页面使用echarts所有组件;引入代码如下:

import * as echarts from "echarts";
1.3 基本使用

vue+Echarts基本使用请见:在Vue项目中引入 ECharts

2 基本折线图

如果我们想建立一个横坐标是类目型(category)、纵坐标是数值型(value)的折线图,我们可以使用这样的方式,将series中type设置为line即可,如下:

const option = {
    xAxis: {
        data: this.xData
    },
    yAxis: {},
    series: [
        {
            data: this.yData,
            type: "line"
        }
    ]
};

vue完整代码如下:

<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      myChart: {},
      xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
      yData: [23, 24, 18, 25, 27, 28, 25], //人数数据
      myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      const option = {
        xAxis: {
          data: this.xData
        },
        yAxis: {},
        series: [
          {
            data: this.yData,
            type: "line" // 类型设置为折线图
          }
        ]
      };
      this.myChart = echarts.init(document.getElementById("mychart"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  }
};
</script>

以上代码效果如图:

在这里插入图片描述

3 复杂折线图

3.1 多条折线

通常我们折线图中会出现多组数据进行对比展示,当出现多组数据的时候,我们在series中多设置对象值即可,当出现多组数据时,为了清晰展示每一条线展示的数据,我们会用到以下两个属性:

legend:data对应折线名称以及数量,位置属性bottom

label:折线上文本标签,默认不展示,通过show控制文本标签是否展示;position控制展示位置,textStyle文本样式;

如下:

const option = {
    xAxis: {
        data: this.xData
    },
    legend: { // 图例
        data: ["人数", "任务"],
        bottom: "0%"
    },
    yAxis: {},
    series: [
        {
            name: "人数",
            data: this.yData,
            type: "line", // 类型设置为折线图
            label: {
                show: true,
                position: "top",
                textStyle: {
                    fontSize: 16
                }
            }
        },
        {
            name: "任务",
            data: this.taskData,
            type: "line", // 类型设置为折线图
            label: {
                show: true,
                position: "bottom",
                textStyle: {
                    fontSize: 16
                }
            }
        }
    ]
};

其中有个小tip,设置文本标签时,为了避免文本密集,对文本的位置进行设置;

如图所示:

在这里插入图片描述

完整vue代码如下:

<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      myChart: {},
      xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
      yData: [23, 24, 18, 25, 27, 28, 25], //人数数据
      taskData: [10, 11, 9, 17, 14, 13, 14], //任务数据
      myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      const option = {
        xAxis: {
          data: this.xData
        },
        legend: { // 图例
          data: ["人数", "任务"],
          bottom: "0%"
        },
        yAxis: {},
        series: [
          {
            name: "人数",
            data: this.yData,
            type: "line", // 类型设置为折线图
            label: {
              show: true,
              position: "top",
              textStyle: {
                fontSize: 16
              }
            }
          },
          {
            name: "任务",
            data: this.taskData,
            type: "line", // 类型设置为折线图
            label: {
              show: true,
              position: "bottom",
              textStyle: {
                fontSize: 16
              }
            }
          }
        ]
      };
      this.myChart = echarts.init(document.getElementById("mychart"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  }
};
</script>

3.2 动态变化折线图

动态变化折线图参见:vue+Echarts绘制动态折线图

4 笛卡尔坐标系中的折线图

如果我们希望折线图在横坐标和纵坐标上都是连续的,即在笛卡尔坐标系中,应该如何实现呢?答案也很简单,只要把 seriesdata 每个数据用一个包含两个元素的数组表示就行了。

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      data: [
        [20, 120],
        [50, 200],
        [40, 50]
      ],
      type: 'line'
    }
  ]
};

如图:
在这里插入图片描述

5 平滑曲线图

平滑曲线图也是折线图的一种变形,这种更柔和的样式也是一种不错的视觉选择。使用时,只需要将折线图系列的 smooth 属性设置为 true 即可。

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 23, 19],
      type: 'line',
      smooth: true
    }
  ]
};

如图所示:

在这里插入图片描述

结合平滑曲线以及自定义坐标形式,其实我们可以使用Echarts绘制数学公式中的曲线图,以下我们给出一个vue+Echarts绘制
y = x 2 y=x^2 y=x2
的曲线;

如图所示:
在这里插入图片描述

完整vue代码如下:

<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      myChart: {},
      seriesData: [[]],
      myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
    };
  },
  mounted() {
    this.initDate(); //数据初始化
    this.initEcharts();
  },
  methods: {
    initDate() {
      for (let i = 0; i < 5; i++) {
        this.seriesData[i] = [i, i * i];
      }
    },
    initEcharts() {
      const optionFree = {
        xAxis: {},
        yAxis: {},
        series: [
          {
            data: this.seriesData,
            type: "line",
            smooth: true
          }
        ]
      };
      this.myChart = echarts.init(document.getElementById("mychart"));
      this.myChart.setOption(optionFree);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  }
};
</script>

6 折线图样式设置

6.1 折线的样式

折线图中折线的样式可以通过 lineStyle 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等,这里,我们以设置颜色(color)、线宽(width)和折线类型(type)为例说明。

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 23, 19],
      type: 'line',
      lineStyle: {
        normal: {
          color: 'green',
          width: 4,
          type: 'dashed'
        }
      }
    }
  ]
};

如图:
在这里插入图片描述

这里设置折线宽度时,数据点描边的宽度是不会跟着改变的,而应该在数据点的配置项中另外设置。

6.2 数据点的样式

数据点的样式可以通过 series.itemStyle 指定填充颜色(color)、描边颜色(borderColor)、描边宽度(borderWidth)、描边类型(borderType)、阴影(shadowColor)、不透明度(opacity)等。与折线样式的设置十分相似,这里不再展开说明。

6.3 其他配置

其他配置如轴坐标属性配置请见轴坐标配置

7 总结

折线图在现实中应用非常广泛,掌握这些基本知识。我们除了能绘制简单折线图以外,还能应对一些非常复杂的情况,如处理数学公式等。

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值