vue2中echarts的使用

原创已于 2023-10-23 16:12:13 修改 · 879 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2023-09-18 17:44:25 首次发布

本文介绍了在Vue项目中如何通过npm和yarn安装ECharts库，以及如何导入并实现基本的图表展示，包括数据配置和tooltip功能。

一、安装

npm安装

 npm i echarts--save

yarn安装

yarn add echarts

二、引入echarts

import * as echarts from 'echarts'

三、使用echarts

<template>
  <div id="chart" style="width: 50vw; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {

    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById('chart'))

      const option = {
       grid: { //占比大小
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    containLabel: true
               },
        title: {
          text: 'ECharts 示例'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            console.log(params[0].seriesName);
            return '2022年数据' + '<br/>' + params[0].seriesName + ':' + params[0].data + '<br>'
              + params[1].seriesName + ':' + params[1].data + '<br>'
            // + params[2].seriesName + ':' + params[2].data
          }

        },
        legend: {
          data: ['销量']
        },
        xAxis: {
          type: 'category',
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子']
        },
        yAxis: {
          type: 'value'
          min: 0,
          name: '单位 W',
          splitNumber: 5, // 设置为 5 表示显示五行刻度线
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 2, 3, 4]，
            barWidth:'30' //设置柱子的width

          },
          {
            name: 'app',
            type: 'bar',
            data: [8, 2, 3, 4],
            itemStyle: {
              color: 'blue'
            }
          },

        ]
      }

      chart.setOption(option)
    }
  }
}
</script>