echarts在vue中的使用

最新推荐文章于 2024-05-08 20:18:06 发布

原创最新推荐文章于 2024-05-08 20:18:06 发布 · 313 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue

本文详细介绍如何在项目中集成并使用ECharts进行数据可视化，包括安装、配置、实例化图表及自定义样式等关键步骤。

1.引入：

命令行运行：

npm install echarts --save

2.配置：

在main.js中加入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.在模块中的使用：

写一个html

<template>
  <div id="chartId" class="wh100percent"></div>
</template>

在script标签里定义echarts对象

封装一个方法echarts方法

      drawCharts() {
        let _that = this
        let xData = ['粥', '小笼包', '八宝粥', '炸酱面']
        let yData = ['28', '35', '38', '49']
        myChart = this.$echarts.init(document.getElementById(this.chartId))
        myChart.setOption(
          {
            angleAxis: {
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#00567D'
                }
              },
              axisLabel: {
                color: '#fff'
              },
              splitLine: {
                lineStyle: {
                  color: '#00567D'
                }
              },
              min: 0,
              max: 120,
              interval: 25
            },
            radiusAxis: {
              type: 'category',
              data: xData,
              z: 100,
              axisLabel: {
                color: '#fff'
              }
            },
            polar: {
            },
            tooltip: {
              trigger: 'item',
              formatter: function (params, ticket, callback) {
                return params.name + ' : ' + _that.toolTipData[params.dataIndex] + ' (' + params.data + '%)'
              }
            },
            series: [{
              type: 'bar',
              data: yData,
              coordinateSystem: 'polar',
              name: 'A',
              stack: 'a',
              itemStyle: {
                normal: {
                  // 定制显示（按顺序）
                  color: function (params) {
                    var colorList = ['#97e7ff', '#75f5ff', '#00deff', '#0093ff', '#2a5fcf']
                    return colorList[params.dataIndex]
                  }
                }
              }
            }]
          }
        )
        $(window).resize(function () {
          myChart.resize()
        })
      }

4.在creat或者mounted生命周期中调用