vue中使用echarts详细步骤（柱状图、饼图、折线图、堆叠折线图）

1.安装 npm install echarts -S
2.准备好有宽高的dom节点

<div class="my-charts">
    <div id="my_bar_chart"></div>
  </div>
.my-charts {
  > div {
    width: 250px;
    height: 200px;
    border: 1px solid #ccc;
  }
}

3.引入echarts，初始化，配置option

<script>
import * as echarts from "echarts";

export default {
  props: {},
  components: {},
  data() {
    return {
      barChart: null
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.barChart = echarts.init(document.getElementById("my_bar_chart"));
    this.init();
  },
  methods: {
    init() {
      this.barChart.setOption({
        title: {
          text: "柱状图",
          textStyle: {
            color: "pink", // 标题颜色
            fontSize: 14, // 默认值：18
            fontStyle: "italic", // normal:正常风格（默认值）,italic:倾斜体
            fontWeight: "bold" // normal:正常粗细（默认值）,bold/bolder:粗体,lighter:正常粗细
          },
          subtext: "柱状图副标题"
        },
        grid: {
          left: "40px",
          right: "10px",
          bottom: "30px"
        },
        xAxis: {
          show: true,
          axisTick: {
            show: false,
            length: 20 // 竖线的长度
          },
          data: ["张三", "李四", "王五"]
        },
        yAxis: {
          axisLabel: {
            show: true
          }
        },
        series: [
          {
            name: "访问来源",
            type: "bar", // 设置图表类型为柱状
            data: [
              // 数据数组，name 为数据项名称，value 为数据项值
              { value: 235, name: "张三" },
              { value: 274, name: "李四" },
              { value: 310, name: "王五" }
            ]
          }
        ]
      });
    }
  }
};
</script>

代码效果：

类似的，可以创建出饼图、折线图、堆叠折线图，实现效果如下：

 完整代码：

<template>
  <div class="my-charts">
    <div id="my_bar_chart"></div>
    <div id="my_pie_chart"></div>
    <div id="my_line_chart"></div>
    <div id="my_barline_chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {},
  components: {},
  data() {
    return {
      barChart: null, // 柱状图
      pieChart: null, // 饼图
      lineChart: null, // 折线图
      barLineChart: null // 堆叠折线图
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.barChart = echarts.init(document.getElementById("my_bar_chart"));
    this.pieChart = echarts.init(document.getElementById("my_pie_chart"));
    this.lineChart = echarts.init(document.getElementById("my_line_chart"));
    this.barLineChart = echarts.init(
      document.getElementById("my_barline_chart")
    );
    this.init();
  },
  methods: {
    init() {
      this.barChart.setOption({
        title: {
          text: "柱状图",
          textStyle: {
            color: "pink", // 标题颜色
            fontSize: 14, // 默认值：18
            fontStyle: "italic", // normal:正常风格（默认值）,italic:倾斜体
            fontWeight: "bold" // normal:正常粗细（默认值）,bold/bolder:粗体,lighter:正常粗细
          },
          subtext: "柱状图副标题"
        },
        grid: {
          left: "40px",
          right: "10px",
          bottom: "30px"
        },
        xAxis: {
          show: true,
          axisTick: {
            show: false,
            length: 20 // 竖线的长度
          },
          data: ["张三", "李四", "王五"]
        },
        yAxis: {
          axisLabel: {
            show: true
          }
        },
        series: [
          {
            name: "访问来源",
            type: "bar", // 设置图表类型为柱状
            data: [
              // 数据数组，name 为数据项名称，value 为数据项值
              { value: 235, name: "张三" },
              { value: 274, name: "李四" },
              { value: 310, name: "王五" }
            ]
          }
        ]
      });
      this.pieChart.setOption({
        title: {
          text: "饼图"
        },
        series: [
          {
            name: "访问来源",
            type: "pie", // 设置图表类型为饼图
            radius: "50%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data: [
              // 数据数组，name 为数据项名称，value 为数据项值
              { value: 235, name: "张三" },
              { value: 274, name: "李四" },
              { value: 310, name: "王五" }
            ]
          }
        ]
      });
      this.lineChart.setOption({
        title: {
          text: "折线图"
        },
        grid: {
          left: "40px",
          right: "10px",
          bottom: "30px"
        },
        xAxis: {
          show: true,
          data: ["张三", "李四", "王五"],
          splitLine: {
            show: false
          },
          axisTick: {
            show: false,
            length: 20 // 竖线的长度
          }
        },
        yAxis: {
          splitLine: {
            show: true
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: "auto",
            formatter: "{value}%"
          }
        },
        series: [
          {
            name: "访问来源",
            type: "line",
            data: [
              { value: 23, name: "张三" },
              { value: 74, name: "李四" },
              { value: 31, name: "王五" }
            ]
          }
        ]
      });
      this.barLineChart.setOption({
        title: {
          text: "堆叠折线图"
        },
        tooltip: {
          trigger: "axis",
          formatter:
            "{b0}<br />{a0} : {c0}<br/>{a1} : {c1}<br/>{a2} : {c2}<br/>{a3} : {c3}"
        },
        grid: {
          left: "40px",
          right: "10px",
          bottom: "25px"
        },
        xAxis: {
          show: true,
          data: ["张三", "李四", "王五"],
          splitLine: {
            show: false
          },
          axisTick: {
            show: false,
            length: 20 // 竖线的长度
          }
        },
        yAxis: {
          splitLine: {
            show: true
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: "auto",
            formatter: "{value}"
          }
        },
        series: [
          {
            name: "商品金额",
            type: "bar",
            stack: "堆叠", //相同的stack开启堆叠
            data: [10, 100, 90],
            barWidth: 30, //柱子宽度
            itemStyle: {
              normal: { color: "#009587" }
            }
          },
          {
            name: "a商品金额",
            type: "bar",
            stack: "堆叠", //相同的stack开启堆叠
            data: [30, 140, 400],
            barWidth: 50, //柱子宽度
            itemStyle: {
              normal: { color: "#2196f3" }
            }
          },
          {
            name: "b商品金额",
            type: "bar",
            stack: "堆叠", //相同的stack开启堆叠
            data: [4, 33, 23],
            barWidth: 50, //柱子宽度
            itemStyle: {
              normal: { color: "#ffeb3b" }
            }
          },
          {
            name: "c商品金额",
            type: "bar",
            stack: "堆叠", //相同的stack开启堆叠
            data: [3, 34, 16],
            barWidth: 50, //柱子宽度
            itemStyle: {
              normal: { color: "#9c27b0" }
            }
          },
          {
            name: "商品数量",
            type: "line",
            data: [50, 175, 1000]
          }
        ]
      });
    }
  }
};
</script>

<style scoped lang="scss">
.my-charts {
  display: flex;
  > div {
    width: 250px;
    height: 200px;
    border: 1px solid #ccc;
  }
  div + div {
    margin-left: 10px;
  }
}
</style>

 




 

posted on 2023-10-24 11:00  bro阿柒  阅读(4365)  评论(0)  编辑  收藏  举报
Copyright © 2024 bro阿柒
Powered by .NET 9.0 on Kubernetes Powered By: 博客园