前端歌谣-第玖拾柒课-vue2+echarts讲解

前言

大家好 我是歌谣 今天给大家带来echarts的讲解

环境配置

vue2+echarts

案例1

<template>
  <div>
    <div>1111</div>
    <div ref="mychart" id="demoDiv"></div>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";
export default {
  name: "HelloWorld",

  data() {
    return {};
  },

  mounted() {
    let myEchart = echarts.init(this.$refs.mychart);
    myEchart.setOption({
      title: {
        text: "hello world",
      },
      xAxis: {
        data: ["EZ", "VN", "GEYAO", "MF"],
      },
      yAxis: {},
      series: {
        name: "LOL英雄大全",
        type:"bar",
        data:[6300,4800,3200,600]
      },
    });
  },

  methods: {},
};
</script>

<style  scoped>
#demoDiv {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

运行结果

案例2

<template>
  <div>
    <div>1111</div>
    <div ref="mychart" id="demoDiv"></div>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";
export default {
  name: "HelloTitle",

  data() {
    return {};
  },

  mounted() {
    let myEchart = echarts.init(this.$refs.mychart);
    myEchart.setOption({
      title: {
        text: "hello world",
        backgroundColor:"pink",
        borderColor:"red",
        borderWidth:5,
        x:"center",
        subtext:"你好"
      },
      xAxis: {
        data: ["EZ", "VN", "GEYAO", "MF"],
      },
      yAxis: {},
      series: {
        name: "LOL人物大全",
        type:"bar",
        data:[6300,4800,3200,600]
      },
    });
  },

  methods: {},
};
</script>

<style  scoped>
#demoDiv {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

运行结果

案例3

<template>
  <div>
    <div>1111</div>
    <div ref="mychart" id="demoDiv"></div>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";
export default {
  name: "HelloTooltip",

  data() {
    return {};
  },

  mounted() {
    let myEchart = echarts.init(this.$refs.mychart);
    myEchart.setOption({
      title: {
        text: "hello world",
        backgroundColor: "pink",
        borderColor: "red",
        borderWidth: 5,
        x: "center",
        subtext: "你好",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        backgroundColor: "pink",
        borderColor: "red",
        borderWidth: 5,
        textStyle: {
          color: "yellow",
        },
        formatter(params) {
          console.log(params);
          for (var i = 0; i < params.length; i++) {
            return (
              "名字" +
              params[i].name +
              "--价格:" +
              params[i].data.value +
              "--日期:" +
              params[i].data.date
            );
          }
        },
      },
      xAxis: {
        data: ["苹果", "西瓜", "香蕉", "橘子"],
      },
      yAxis: {},
      series: {
        name: "LOL人物大全",
        type: "bar",
        data: [
          { value: "5", date: "2020-1-1" },
          { value: "6", date: "2020-1-1" },
          { value: "9", date: "2020-1-1" },
          { value: "7", date: "2020-1-1" },
        ],
      },
    });
  },

  methods: {},
};
</script>

<style  scoped>
#demoDiv {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

运行结果

案例4

<template>
  <div>
    <div>1111</div>
    <div ref="mychart" id="demoDiv"></div>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";
export default {
  name: "HelloLegend",

  data() {
    return {};
  },

  mounted() {
    let myEchart = echarts.init(this.$refs.mychart);
    myEchart.setOption({
      title: {
        text: "hello world",
        backgroundColor:"pink",
        borderColor:"red",
        borderWidth:5,
        x:"center",
        subtext:"你好"
      },
      legend:{
        show:true,
        top:"10%",
        itemWidth:10,
        itemHeight:20
      },
      xAxis: {
        data: ["EZ", "VN", "GEYAO", "MF"],
      },
      yAxis: {},
      series: {
        name: "LOL人物大全",
        type:"bar",
        data:[6300,4800,3200,600]
      },
    });
  },

  methods: {},
};
</script>

<style  scoped>
#demoDiv {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>

运行结果