echarts系列-----1

最新推荐文章于 2024-08-10 07:16:27 发布

zhooson

最新推荐文章于 2024-08-10 07:16:27 发布

阅读量191

点赞数

分类专栏： vue echarts 文章标签： echarts

本文链接：https://blog.csdn.net/Zhooson/article/details/90230556

版权

vue 同时被 2 个专栏收录

67 篇文章 1 订阅

订阅专栏

echarts

7 篇文章 0 订阅

订阅专栏

本篇讲解最简单的echarts实现方法，具体见代码，并标注注释（例子文档事例都是有的，传送门?）

在这里插入图片描述

<template>
  <div>
    <div id="main" style="width:1200px;height:600px;"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "echartssimple",
  data() {
    return {
      list: [
        {
          x: 1,
          y: 1
        },
        {
          x: 2,
          y: 2
        },
        {
          x: 3,
          y: 3
        },
        {
          x: 4,
          y: 4
        },
        {
          x: 5,
          y: 1
        },
        {
          x: 6,
          y: 0
        },
        {
          x: 7,
          y: 10
        }
      ],
      dataX: [],
      dataY: []
    };
  },
  methods: {
    init() {
      this.myChart = echarts.init(document.getElementById("main"));
      let option = {
        legend: {
          icon: "stack",
          data: ["AA"]
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            animation: true
          }
        },
        // 工具栏
        toolbox: {
          x: 1100,
          y: 0,
          feature: {
            saveAsImage: {
              name: `test` // 下载图片
            }
          }
        },
        grid: {
          left: "5%", //组件距离容器左边的距离
          right: "20%",
          top: "15%"
        },
        // X轴 滑块 可缩放
        dataZoom: [
          {
            type: "slider",
            show: true,
            start: 0, // 开始百分数
            end: 100 // 结束百分数
          }
        ],
        xAxis: {
          type: "category",
          splitLine: {
            // X 轴分隔线样式
            show: true,
            lineStyle: {
              color: ["#f3f0f0"],
              width: 2,
              type: "solid"
            }
          },
          data: this.dataX
        },
        yAxis: [
          {
            name: "Y轴单位写的位置",
            type: "value",
            // max: 100,
            // min: 0,
            splitNumber: 10, // Y 轴分隔格数
            splitLine: {
              // Y 轴分隔线样式
              show: true,
              lineStyle: {
                color: ["#f3f0f0"],
                width: 2,
                type: "solid"
              }
            }
          }
        ],
        series: this.dataY
      };

      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.dataX = this.list.map(item => item.x);
      this.dataY.push({
        name: "AA",
        type: "line",
        data: this.list.map(item => item.y)
      });

      this.init(this.dataX, this.dataY);
    });
  }
};
</script>

<style scoped>
</style>