vue项目引入echarts

树洞菇凉

已于 2022-03-03 16:12:58 修改

阅读量170

点赞数

分类专栏： echarts 文章标签： echarts vue.js 前端

于 2022-03-03 16:12:16 首次发布

本文链接：https://blog.csdn.net/qq_37916164/article/details/123257020

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1：NPM 安装 ECharts

你可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

2：在项目目录下的main.js文件中引入echarts，并创建$echarts实例

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts

3、在页面中创建一个dom节点并绑定id用以承载echarts图表：

<div id="chart" style="width:100%;height:400px;"></div>

定义一个函数，获取dom节点，初始化我们需要的图表数据，以备渲染：

drawHistogram () {

      const myHistogram = this.$echarts.init(document.getElementById('chart'))

      const histogramData = {

        tooltip: {

          trigger: 'axis',

          axisPointer: { // 坐标轴指示器，坐标轴触发有效

            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'

          }

        },

        grid: {

          left: '3%',

          right: '4%',

          bottom: '3%',

          containLabel: true

        },

        xAxis: [

          {

            type: 'category',

            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

            axisTick: {

              alignWithLabel: true

            }

          }

        ],

        yAxis: [

          {

            type: 'value'

          }

        ],

        series: [

          {

            name: '直接访问',

            type: 'bar', // type值设置图表类型，bar为柱状图

            barWidth: '30%', // 柱形的宽度

            data: [10, 52, 200, 334, 390, 330, 220]

          }

        ]

      }

      myHistogram.setOption(histogramData)

    }