vue+echarts实现折线图——部分配置参数记录(多做记录，防止忘记)

我不是女神ヾ 2022-08-31 02:24 185阅读 0赞

昨天在做折线图时，发现自己对`echarts`很不熟悉，遇到需求，全靠百度。哎，平时懒，关键时刻坑自己。现在就对我遇到的属性做一个记录。  
效果图如下所示：  
![在这里插入图片描述][98d58aa5e213831f88279f1dce5ccc65.png]  
现在对这个折线图进行分析：  
![在这里插入图片描述][457293e45eebf36ffcb38b87ae352f00.png]  
配置上面所说的内容，需要用到`option`中的属性：

## 1.标题部分——`title` ##

标题字段名：`title`  
文本字段名：`text`  
字体样式：`textStyle`，`fontSize`指定文本的字号

title: { 
     text: "中国精铜价格(元/每吨)",
      textStyle: { 
        fontSize: 14,
      },
    },

## 2.网格区域——`grid` ##

网格区域字段名：`grid`  
位置字段名：`x y x2 y2`

grid: { 
      x: 40,
      y: 45,
      x2: 20,
      y2: 20,
    },

## 3.x轴设置——`xAxis` ##

`x`轴的`type`值：`category`,还有其他参数，此处使用`category`即可.  
坐标轴两侧的留白：`boundaryGap`，值有两个：`true`表示有留白,`false`表示没有留白  
`x`轴的文本设置：`axisLabel`  
坐标轴刻度线设置：`axisTick`

xAxis: { 
      type: "category",
      boundaryGap: true,
      axisLabel: { 
        textStyle: { 
          fontSize: 10,
        },
      },
      axisTick: { 
        show: false,
      },
      data: [],
    },

## 4.y轴设置——`yAxis` ##

同上：

yAxis: { 
      type: "value",
      axisLabel: { 
        show: true,
        interval: "auto",
        textStyle: { 
          fontSize: 10,
        },
      },
      axisLine: { 
        show: false,
      },
      axisTick: { 
        show: false,
      },
    },

## 5.图例——`legend` ##

`data`:表示图例的内容，是一个数组  
图例的位置可以通过：`left bottom right top`来设置，设置的参数可以是`auto 百分数 固定值`等。  
图例的样式可以为`circle rect line`等，分别代表`圆形 矩形 直线`等

legend: { 
      data: ["铜"],
      right: "right",
      icon: "line",
      textStyle: { 
        fontSize: 12,
        color: "#f90",
      },
    },

## 6.绘制区域——`series` ##

绘制区域可以有多条线，也可以是单条线，所以是一个数组形式。  
`type`:表示是什么类型的绘制，折线对应的`type`是`line`  
`data`:表示的折线的数据，也就是拐点数据  
`symbol`:表示折线转折点的形式，有圆形 矩形 圆角矩形 箭头等各种形式  
`symbolSize`:表示折线转折点的大小  
`label`:表示点击拐点时，要展示的内容，一般用作描述详情补充展示  
`itemStyle`:表示拐点的样式  
`lineStyle`:表示折线的样式

series: [
      { 
        name: "铜",
        type: "line",
        stack: "价格",
        data: [],
        symbol: "circle", //修改交叉点样式
        symbolSize: 6, //修改交叉点大小
        label: { 
          show: false,
          position: "right",
          textStyle: { 
            fontSize: 10,
          },
        },
        itemStyle: { 
          normal: { 
            color: "#f90",
          },
        },
        lineStyle: { 
          color: "#f90",
        },
      },
    ],

[98d58aa5e213831f88279f1dce5ccc65.png]: /images/20220829/c347005c27ca4e1e863a1330936113c3.png
[457293e45eebf36ffcb38b87ae352f00.png]: /images/20220829/1b2f121eefe44e9d8d6665fe7a7d4827.png