Echarts 示例总汇

[zptime]

<template>
  <div id="pdfDom" class="demo-wrapper">
    <!-- 饼图 -->
    <pie-charts />
    <div class="demo">
      <div class="demo-title">
        <div class="title">基础图表</div>
        <!-- <a-button type="primary" @click="handleExportPdf">导出</a-button> -->
        <!-- <a-button type="primary" v-print="printObj">window.print()</a-button> -->
      </div>
      <div class="demo-block">
        <div class="demo-block-title">-- 折线图 --</div>
        <div class="demo-block-content">
          <div id="chart" style="width: 600px; height: 400px"></div>
        </div>
      </div>
    </div>
    <!-- 柱状图 -->
    <bar-charts />
    <!-- 折线图 -->
    <line-charts />
  </div>
</template>

<script>
import barCharts from "./barCharts"
import lineCharts from "./lineCharts"
import pieCharts from "./pieCharts"

export default {
  data() {
    return {
      // 前端html转pdf解决方案：https://juejin.cn/post/6844903612993241101
      printObj: {
        id: "pdfDom",
        popTitle: "good print",
        extraCss: "https://www.google.com,https://www.google.com",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
      },
    };
  },
  components: {
    barCharts,
    lineCharts,
    pieCharts,
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      // 参考文档：https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-jqyw2elc.html
      // 官方文档：http://echarts.apache.org/zh/index.html
      // 社区地址：https://www.makeapie.com/explore.html#sort=createTime~timeframe=all~author=all

      // 按需加载配置：查看@libs/echarts和main.js文件
      let chart = this.$echarts.init(
        document.getElementById("chart")
      );
      let option = {
        // 图表名
        title: {
          text: "店铺销售折线图",
        },
        // 提示框
        tooltip: {
          trigger: "axis", //开启tips框框
          axisPointer: { type: "cross" }, //y轴刻度跟随鼠标显示
        },
        color: ["red", "yellow", "blue"],
        // 图例配置
        legend: {
          data: ["销量", "广告主数", "预估收益"],
          left: "right", // 对齐方式
        },
        // 设置折线图大小
        grid: {
          top: 60, // 主图距离整个容器顶部的距离
          left: 60,
          right: 0,
          bottom: 60,
        },
        xAxis: {
          type: "category", // 类型：value-数值轴；category-类目轴，离散数据；time-时间轴；log-对数轴
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          boundaryGap: true, //坐标轴两边留白
          axisLine: {
            //坐标轴轴线
            onZero: true,
            show: true, // 是否显示
            lineStyle: {
              // 轴线样式
              color: "purple",
              width: "92%",
              // opacity: 0.01, //设置透明度就可以控制显示不显示
            },
          },
          axiosTick: {
            // 坐标轴刻度
            show: true,
            alignWithLabel: true,
            interval: "auto",
            lineStyle: {
              // 刻度线样式
            },
          },
          axisPointer: {
            label: {
              //相当于tips的标题
              formatter: function (params) {
                return params.value + "详情";
              },
            },
          },
          splitLine: {
            // 网格线
            show: false, // 网格线
            lineStyle: {
              color: "#eeeeee",
            },
          },
        },
        yAxis: {
          type: "value",
          min: 0, //最小刻度
          max: 5000, //最大刻度
          name: "数量", //是基于Y轴线对齐，用空格站位让坐标轴名称与刻度名称对齐
          nameTextStyle: {
            color: "#444e65",
            align: "left", //文字水平对齐方式
            verticalAlign: "middle", //文字垂直对齐方式
          },
          splitLine: {
            // 网格线
            lineStyle: {
              color: "lightblue",
            },
          },
          axisTick: {
            show: false, //去掉刻度线
          },
          axisLabel: {
            color: "pink", //Y轴刻度字颜色
          },
          axisLine: {
            lineStyle: {
              // 设置y轴轴线颜色
              color: "blue",
            },
          },
        },
        series: [
          {
            name: "销量",
            type: "line", // 图表类型，折线图
            data: [1344, 1342, 1432, 1232, 1346, 1336],
            label: {
              // 图形上的文本标签
              normal: {
                formatter: "{@data}℃",
                show: true, //显示数据
                color: "#00af58",
                position: "top",
                fontSize: "14",
              },
            },
            itemStyle: {
              // 折线拐点标志的样式
              normal: {
                color: "#00af58",
              },
            },
            areaStyle: {
              // 区域填充样式
              normal: {
                // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0, 175, 88, 0.4)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 175, 88, 0.01)",
                    },
                  ],
                  globaCoord: false,
                },

                // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
                // color: {
                //   type: "radial",
                //   x: 0.5,
                //   y: 0.5,
                //   r: 0.5,
                //   colorStops: [
                //     {
                //       offset: 0,
                //       color: "red", // 0% 处的颜色
                //     },
                //     {
                //       offset: 1,
                //       color: "blue", // 100% 处的颜色
                //     },
                //   ],
                //   globalCoord: false, // 缺省为 false
                // },

                // 纹理填充
                // color: {
                //   image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                //   repeat: "repeat", // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
                // },
              },
            },
          },
          {
            name: "广告主数",
            type: "line",
            smooth: false,
            data: [232, 433, 235, 636, 334, 233],
          },
          {
            name: "预估收益",
            type: "line",
            smooth: true, // true曲线  false折线
            data: [1133, 1323, 4323, 2323, 1343, 1033],
          },
        ],
      };
      chart.setOption(option);
    },
    handleExportPdf() {
      // window.scrollTo(0, 0); // 确保打印内容完整
      document.body.scrollTop = 0; // IE的
      document.documentElement.scrollTop = 0; // 其他
      // this.getPdf("pdfDom", "消费统计");

      // 局部打印
      // https://my.oschina.net/u/2612473/blog/4310030
      // https://cloud.tencent.com/developer/article/1644472
    },
  },
};
</script>

<style lang="scss">
.demo {
  background-color: #fff;
  padding: 16px;
  margin-bottom: 20px;
  &-title {
    display: flex;
    align-items: center;
    .title {
      font-weight: bold;
      font-size: 24px;
      margin-right: 32px;
    }
    .ant-btn {
      margin-right: 8px;
    }
  }
  &-flex {
    display: flex;
    &-split {
      width: 320px;
    }
    &-margin {
      margin-right: 30px;
    }
  }
  &-block {
    &-title {
      margin: 12px 0 6px;
    }
    &-content {
      display: inline-block;
      &-flex {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>