zqy233的前端学习笔记

主题

回到顶部
索引

vue中使用

安装

bash
npm i -s echarts

npm i -s echarts
  1. 定义一个有宽高的html元素
  2. 获取那个有宽高的html元素，使用echarts的init方法初始化echarts
  3. 设置好echarts的option
  4. 使用init返回的echarts实例的setOption方法设置option

语法

vue2

js
<template>
  <div class="echarts-style">
    <div id="chart" class="line-chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"
export default {
  data() {
    return {
      options: {
        grid: {
          left: "30",
          right: "30",
          bottom: "30"
        },
        // color: ["pink", "skyblue"],
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line"
          },
          {
            data: [110, 220, 124, 118, 335, 117, 160],
            type: "line"
          },
          {
            data: [10, 1, 224, 218, 135, 147, 260],
            type: "line"
          },
          {
            data: [20, 30, 224, 218, 135, 147, 260],
            type: "line"
          }
        ]
      },
      chartLine: {}
    }
  },
  props: {
    echartData: Object
  },
  watch: {
    echartData: {
      handler() {
        this.options.xAxis.data = this.echartData.xAxis
        this.options.series[0].data = this.echartData.xeLine
        this.options.series[1].data = this.echartData.scLine
        this.options.series[2].data = this.echartData.zsLine
        this.options.series[3].data = this.echartData.ycLine
        this.chartLine.setOption(this.options)
      },
      deep: true
    }
  },
  mounted() {
    this.drawPieChart()
  },
  methods: {
    drawPieChart() {
      this.chartLine = echarts.init(document.getElementById("chart"))
      this.chartLine.setOption(this.options)
      window.addEventListener("resize", () => {
        this.chartLine.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.echarts-style {
  width: 100%;
  height: 300px;

  .line-chart {
    width: 100%;
    height: 100%;
  }
}
</style>

<template>
  <div class="echarts-style">
    <div id="chart" class="line-chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"
export default {
  data() {
    return {
      options: {
        grid: {
          left: "30",
          right: "30",
          bottom: "30"
        },
        // color: ["pink", "skyblue"],
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line"
          },
          {
            data: [110, 220, 124, 118, 335, 117, 160],
            type: "line"
          },
          {
            data: [10, 1, 224, 218, 135, 147, 260],
            type: "line"
          },
          {
            data: [20, 30, 224, 218, 135, 147, 260],
            type: "line"
          }
        ]
      },
      chartLine: {}
    }
  },
  props: {
    echartData: Object
  },
  watch: {
    echartData: {
      handler() {
        this.options.xAxis.data = this.echartData.xAxis
        this.options.series[0].data = this.echartData.xeLine
        this.options.series[1].data = this.echartData.scLine
        this.options.series[2].data = this.echartData.zsLine
        this.options.series[3].data = this.echartData.ycLine
        this.chartLine.setOption(this.options)
      },
      deep: true
    }
  },
  mounted() {
    this.drawPieChart()
  },
  methods: {
    drawPieChart() {
      this.chartLine = echarts.init(document.getElementById("chart"))
      this.chartLine.setOption(this.options)
      window.addEventListener("resize", () => {
        this.chartLine.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.echarts-style {
  width: 100%;
  height: 300px;

  .line-chart {
    width: 100%;
    height: 100%;
  }
}
</style>

配置项

仅记录常用的配置项，详细配置项请看官方文档

属性说明
xAxis直角坐标系的 x 轴
yAxis直角坐标系的 y 轴
series系统列表，根据 type 决定图表类型
tooltip鼠标悬浮时的提示框相关

折线图

typescript
const option = {
  // 图例颜色
  color: ['#0755BE', '#D4DE30', '#135219', '#606672'],
  // 图例
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  // x轴
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  // y轴
  yAxis: {
    type: 'value'
  },
  // 系统列表
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      smooth: true, // 控制曲线是否平滑
      areaStyle: {} // 区域填充样式。设置后显示成区域面积图
    }
  ]
}

const option = {
  // 图例颜色
  color: ['#0755BE', '#D4DE30', '#135219', '#606672'],
  // 图例
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  // x轴
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  // y轴
  yAxis: {
    type: 'value'
  },
  // 系统列表
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      smooth: true, // 控制曲线是否平滑
      areaStyle: {} // 区域填充样式。设置后显示成区域面积图
    }
  ]
}

柱状图

js
const option = {
  // x轴
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  // y轴
  yAxis: {
    type: 'value'
  },
  // 系统列表
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar', // 柱状图
      showBackground: true, // 是否显示背景
      // 柱状图背景色
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
}

const option = {
  // x轴
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  // y轴
  yAxis: {
    type: 'value'
  },
  // 系统列表
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar', // 柱状图
      showBackground: true, // 是否显示背景
      // 柱状图背景色
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
}

应用示例

js
    setLine() {
     
    setRound() {
      const option = {
        color: ["#3AA0FF", "#36CBCB", "#4DCB73", "#FAD337", "#F2637B", "#F2637B"],
        // 标题
        title: {
          text: "退役军人来访类别比例图"
        },
        // 鼠标悬浮时的提示框
        tooltip: {
          trigger: "item" // 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
        },
        // 图例
        legend: {
          top: 35
        },
        // 数据来源与配置
        series: [
          {
            name: "退役军人来访类别比例图",
            type: "pie",
            radius: ["60%", "80%"],
            top: 40,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              formatter: "{b}\n{d}%"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold"
              }
            },
            data: [
              { value: 1048, name: "退役军人" },
              { value: 735, name: "现役军人" },
              { value: 580, name: "军人家属" },
              { value: 484, name: "陪同人员" },
              { value: 300, name: "其他人员" }
            ]
          }
        ]
      }
      this.setEcharts(this.$refs.round, option)
    },
    setCategory() {
      const option = {
        title: {
          text: "告警次数统计图"
        },
        color: ["#3BA1FF"],
        xAxis: {
          type: "category",
          data: ["12.01", "12.02", "12.03", "12.04", "12.05", "12.06", "12.07", "12.08", "12.09", "12.11", "12.12", "12.13", "12.14", "12.15", "12.166", "12.17", "12.18", "12.19", "12.20", "12.21", "12.22", "12.23", "12.24", "12.25", "12.26", "12.27", "12.28", "12.29", "12.30", "12.31"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [1, 2, 3, 4, 5, 6, 7, 6, 5, 4, 3, 3, 2, 1],
            type: "bar",
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)"
            }
          }
        ]
      }
      this.setEcharts(this.$refs.category, option)
    }
  }
}
</script>

    setLine() {
     
    setRound() {
      const option = {
        color: ["#3AA0FF", "#36CBCB", "#4DCB73", "#FAD337", "#F2637B", "#F2637B"],
        // 标题
        title: {
          text: "退役军人来访类别比例图"
        },
        // 鼠标悬浮时的提示框
        tooltip: {
          trigger: "item" // 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
        },
        // 图例
        legend: {
          top: 35
        },
        // 数据来源与配置
        series: [
          {
            name: "退役军人来访类别比例图",
            type: "pie",
            radius: ["60%", "80%"],
            top: 40,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              formatter: "{b}\n{d}%"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold"
              }
            },
            data: [
              { value: 1048, name: "退役军人" },
              { value: 735, name: "现役军人" },
              { value: 580, name: "军人家属" },
              { value: 484, name: "陪同人员" },
              { value: 300, name: "其他人员" }
            ]
          }
        ]
      }
      this.setEcharts(this.$refs.round, option)
    },
    setCategory() {
      const option = {
        title: {
          text: "告警次数统计图"
        },
        color: ["#3BA1FF"],
        xAxis: {
          type: "category",
          data: ["12.01", "12.02", "12.03", "12.04", "12.05", "12.06", "12.07", "12.08", "12.09", "12.11", "12.12", "12.13", "12.14", "12.15", "12.166", "12.17", "12.18", "12.19", "12.20", "12.21", "12.22", "12.23", "12.24", "12.25", "12.26", "12.27", "12.28", "12.29", "12.30", "12.31"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [1, 2, 3, 4, 5, 6, 7, 6, 5, 4, 3, 3, 2, 1],
            type: "bar",
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)"
            }
          }
        ]
      }
      this.setEcharts(this.$refs.category, option)
    }
  }
}
</script>

示例柱图

js
option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: "bar",
      showBackground: true,
      backgroundStyle: {
        color: "rgba(180, 180, 180, 0.2)"
      }
    }
  ]
}
create()

option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: "bar",
      showBackground: true,
      backgroundStyle: {
        color: "rgba(180, 180, 180, 0.2)"
      }
    }
  ]
}
create()

数据出现合并

默认第二个参数是false，表示合并，设置true则不合并

js
this.myChart.setOption(this.option, true)

this.myChart.setOption(this.option, true)

Released under the MIT License.

Copyright © 2022.4-2024.7