折线图

折线图主要用来展示数据项随着时间推移的趋势或变化

import * as echarts from "echarts";
export default {
  install: (app: any) => {
    app.config.globalProperties.$zhe = (id: any) => {
      var chartDom = document.getElementById(id)!;
      if (chartDom == null) {
        return;
      }
      echarts.dispose(chartDom);
      var myChart = echarts.init(chartDom, "", { width: 500, height: 300 });
      window.addEventListener("resize", () => {
        myChart.resize({
          width: window.innerWidth / 2,
          height: window.innerHeight / 2,
        });
      });
      const option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
      myChart.setOption(option);
    };
  },
};

常用属性

grid 属性

主体区域,设置折线图在容器中的大小

修改折线图大小，显示边框设置颜色，显示刻度标签

grid: {
  top: '10%',
  left: '10%',
  right: '10%',
  bottom: '10%',
  z: 0,  //相当于z-index属性
  show: true, // 显示边框
  borderWidth: 5,
  backgroundColor: "red",
  borderColor: '#012f4a',// 边框颜色
  containLabel: true // 包含刻度文字在内(坐标轴文字属于图表的一部分)
}

tooltip 属性(全局)

在折线图中添加提示框组件，即鼠标经过时显示的提示框，当然提示框也是一个全局配置，就是在其他图表中也适用

tooltip: {
    show: true,  // 是否显示提示组件
    triggerOn: 'mousemove',  // 或者click ，触发方式
    showContent: true,  // 是否显示提示框
    alwaysShowContent: false,  // 是否用于显示提示框（鼠标离开也会一直在）
    showDelay: 10,   // 延时显示时间
    hideDelay: 1000,   // 延时消失时间
    enterable: true,  // 时标可以滑倒提示框上（不会消失）
    renderMode: 'html',  // 渲染模式 还可取值richText, 小程序推荐使用richText
    confine: true,   // 提示框是否只允许在容器内，只有renderMode在html模式下生效（提示内容过多的话会超出容器）
    className: 'echarts-tooltip-iwen',
    // formatter:"{b0}:{c0}", // 格式化方式1： 字符串模板
    formatter: (params: any) => {  // 格式化方式2： 回调函数（强烈推荐）
        console.log(params)
        return `<a href='http://mi.com'><div style='width:100px;height:50px'>${params.name}:${params.value}</div></a>`
    },
    backgroundColor: "#eee",
    borderColor: "green",
    borderWidth: 10,
    padding: 0,
    extraCssText: 'box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);',  // 弹出框阴影
    textStyle: {
        color: "red",  //样式可能受格式化回调函数a标签的影响
        fontSize: 18
    }
},

title 属性(全局)

标题组件，包含主标题和副标题，当然标题组件也是一个全局配置，就是在其他图表中也适用

title: {
    show: true,
    text: "图表标题",
    link: "https://mi.com",
    target: "blank",
    textStyle: {         // 标题的样式
        color: "red",
        fontSize: 15
    },
    subtext: "图表副标题",
    sublink: "https://mi.com",
    subtarget: "blank",
    subtextStyle: {      // 副标题的样式
        color: "#999",
        fontSize: 15
    },
    textAlign: "center",  // 文本的水平对齐设置（是对齐方式）
    textVerticalAlign: "top",// 文本的竖直对齐设置（是对齐方式）
    itemGap: 10,  // 主副标题的间距
    left: "50%",
    top: 0,
    // right: "center",
    // bottom: 0,
    backgroundColor: "#eee",
    borderWidth: 5,
    padding: 10,
    borderColor: '#ccc',
    borderRadius: 5
},

xAxis 属性

直角坐标系 grid 中的 x 轴

xAxis: {
    show: true,
    type: 'category',  //可选time（时间）,log（对数）,value(连续的数据),category(类目)
    data: [{
            value: ['周一'],
            textStyle: {
                fontSize: 20,
                color: 'pink'
            }
        },
        {
            value: ['周二'],
            textStyle: {
                fontSize: 20,
                color: 'green'
            }
        },
        '周三', '周四', '周五', '周六', '周日'],
    position: "bottom",  //x轴的位置
    name: "周", // x轴起个名字
    nameLocation: "end",  // x轴名字的位置
    nameTextStyle: {
        color: "#999",
        fontSize: 15
    },
    nameGap: 10,  // 名字和轴线的间距
    nameRotate: 45, // 名字的角度
    inverse: false,  // 顺序反转
    boundaryGap: false,  //轴信息的留白
    min: 0,
    max: 6,
    axisLine: {   // 坐标轴轴线的设置
        show: true,
        symbol: "arrow",  //可选arrow 、 none，轴线是否带箭头
        lineStyle: {
            color: "red",
            width: 3
        }
    },
    axisTick: {       // 坐标轴刻度的设置
        show: true,
        inside: true,   // 刻度朝里或者朝外
        lineStyle: {
            color: "green",
            width: 3
        }
    },
    splitLine: {   // 轴和轴之间面积的分割线
        show: true,
    },
    splitArea: {    // 轴和轴之间面积的分隔区域
        show: true,
        areaStyle: {
            color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
            opacity: 1
        },
    },
},

yAxis 属性

直角坐标系 grid 中的 y 轴，可参考 xAxis 属性

yAxis: {
  show: true,
  type: "value",
  position: "left",
  name: "数量",
  nameLocation: "end",
  nameTextStyle: {
    color: "#999",
    fontSize: 14
   },
  nameGap: 20,
  nameRotate: 10,
  inverse: false,
  boundaryGap: ['20%', '20%'],
  min: 0,
  max: 100,
  splitNumber: 10,
  axisLine: {
    show: true,
    lineStyle: {
      color: "red",
      width: 3
     }
   },
  axisTick: {
    show: true,
    inside: true
   },
  splitLine: {
    show: true
   },
  splitArea: {
    show: true,  // 是否显示分隔区域
    areaStyle: {
      color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
      opacity: 1
     },
   }
}

series 属性

折线图上的转折点和连接线的设置,一个折线图可以有多个折线

legend: {   // 图例
    data: ["苹果", "橘子"]
},
series: [
    // 第一根折线
    {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
        name: '苹果',   // 为每一根折线起一个名字，基于name属性可以额外增加legend（图例）
        colorBy: "data",   // 可取 series,设置转折点的样式
        symbol: "rect",  // 转折点的样式（参考官方文档）
        symbolSize: 10,   // 转折点的大小
        symbolRotate: 45,   // 转折点的旋转角度
        step: false,    // 是否为阶梯线条(直着的)
        lineStyle: {   // 线的样式
            color: "red",
            width: 5,
            type: "dotted"   //具体类型参考官方文档）
        },
        areaStyle: {     // 线包围的区域样式
            color: "red",
            opacity: "0.5"
        },
        emphasis: {           // 选中时是否隐藏其他的线
            disabled: false,
            scale: true,
            focus: 'series'
        },
        smooth: true, //是否平滑过渡
    },
    // 第二根折线
    {
        data: [110, 310, 134, 278, 115, 107, 490],
        type: 'line',
        name: '橘子',
    }
]