1200字范文 > vue引入Echarts画折线图平滑曲线图转化数学公式详解

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

时间：2020-05-16 20:05:52

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完整代码如下：

以上代码效果如图：

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 笛卡尔坐标系中的折线图

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

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=x2y=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'}}}]};

如图：

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