Echarts line折线图实例

test/charts/lineCharts文件
<template>
  <div class="demo">
    <div class="demo-title">
      <div class="title">基础图表</div>
    </div>
    <div class="demo-block">
      <div class="demo-block-title">-- 折线图 --</div>
      <div class="demo-block-content">
        <div id="lineCharts" style="width: 600px; height: 400px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as R from "ramda";
import { xAxis, yAxis, lineTooltip } from "./utils";

const initOption = {
  title: {
    text: "累计消费趋势", // 标题
    subtext: "同比上年同期，累计消费增加200元", // 副标题
    top: -5, // 定位
    left: -5, // 定位
    subtextStyle: {
      // 副标题样式
      color: "#808080",
      fontSize: 12,
    },
  },
  legend: {
    top: 24, // 定位，和副标题一排
    right: 0, // 定位，和副标题一排，且在右边
    icon: "circle", // 图例形状
    // itemWidth: 25, // 图例标记的图形宽度
    itemHeight: 6, // 图例标记的图形高度
    itemGap: 24, // 图例每项之间的间隔
    itemStyle: {}, // 图例的图形样式
    textStyle: {
      // 图例文字属性
      fontSize: 12,
      color: "#333",
      padding: [0, 0, 0, -8], // 修改文字和图标距离
    },
  },
  grid: {
    // 绘图网格
    top: 70,
    left: 0,
    right: 12,
    bottom: 0,
    containLabel: true,
  },
  xAxis: R.mergeDeepRight(xAxis, {
    type: "category",
    boundaryGap: false, // 不留白
    axisLabel: {
      interval: 50, // 只显示最大和最小坐标
      showMinLabel: true, // 显示最小标签
      showMaxLabel: true, // 显示最大标签
    },
    axisLine: {
      lineStyle: {
        type: "dashed", // 直线指示器为虚线
        // dashOffset: 5 // 虚线的偏移量
      },
    },
    axisPointer: {
      type: "line", // 直线指示器
    },
  }),
  yAxis: R.merge(yAxis, {
    type: "value",
    axisPointer: {
      show: false,
    },
  }),
  series: [
    {
      type: "line",
      color: "#1890ff", // 线条颜色
      areaStyle: {
        color: "rgba(24,144,255,0.08)", // 区域背景色
      },
      showSymbol: false, // 只有在 tooltip hover 的时候显示
      symbol: "emptyCircle", // 拐点形状
      symbolSize: 6, //拐点大小
    },
    {
      type: "line",
      color: "#52c41a",
      areaStyle: {
        color: "rgba(82,196,26,0.08)",
      },
      showSymbol: false,
      symbol: "emptyCircle",
      symbolSize: 6,
    },
  ],
  dataset: {
    dimensions: ["金额", "2020年累计消费", "2021年累计消费"],
    source: [
      ["1月", 200, 100],
      ["2月", 288, 200],
      ["3月", 360, 486],
      ["4月", 450, 680],
    ],
  },
  tooltip: R.mergeDeepRight(lineTooltip, {
    axisPointer: {
      label: {
        show: true, // 鼠标悬浮时，显示x轴标签，如2月，3月；
      },
    },
    formatter: function(params) {
      let html = `<div style="height:auto;width:234px;">
          <div style="font-size:14px;font-weight:bold;color:#333;margin-bottom:16px;line-height:1;">
            截止 ${params[0].axisValue}
          </div>
          ${params
            .map(
              (
                item
              ) => `<div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;">
                <span style="display:inline-block;margin-right:8px;border-radius:6px;width:6px;height:6px;background-color:${
                  item.color
                };"></span>
                ${item.seriesName}
                <span style="flex:1;text-align:right;">${
                  item.value[item.encode.y[0]]
                }</span>
              </div>`
            )
            .join("")}
        </div>`;
      return html;
    },
  }),
};

export default {
  data() {
    return {
      charts: null,
    };
  },
  mounted() {
    this.charts = this.$echarts.init(
      document.getElementById("lineCharts"),
      null,
      {
        renderer: "svg",
      }
    );
    this.charts.setOption(R.clone(initOption));
  },
  methods: {},
};
</script>

<style lang="scss" scoped></style>
zptime / blog

Echarts line折线图实例 #11
