vue-cli项目中使用动态echarts

朴灿烈づ我的快乐病毒、 2022-02-01 13:25 301阅读 0赞

1、安装：`npm i -g vue-cli`  
初始化vue 项目：`vue init webpack vue-demo02`  
项目安装过程：

? Project name # 回车
    ? Project description # 回车
    ? Author  # 回车
    ? Vue build standalone  # =>  # 回车
    ? Install vue-router? # Yes
    ? Use ESLint to lint your code? # Yes
    ? Pick an ESLint preset Standard  # standard
    ? Set up unit tests # No
    ? Setup e2e tests with Nightwatch? # No
    ? Should we run `npm install` for you after the project has been created? # (recommended) npm

2、配置app.vue文件

3、安装 ECharts：`npm install echarts --save`  
4、配置HelloWorld.vue文件

<template>
      <div id="main" :style="{width: '800px', height: '500px'}"></div>
    </template>
    
    <script>
    import echarts from 'echarts'
    export default {
      data () {
        return {
          timer: null
        }
      },
      mounted () {
        this.timer = setInterval(this.drawLine, 1000)
      },
      methods: {
        drawLine () {
          var base = +new Date()
          var oneSecond = 1000
          var date = []
          var data = []
          for (var i = 1; i <= 10; i++) {
            var now = new Date((base += oneSecond))
    		date.push(
              [
                ('0' + now.getHours()).slice(-2),
                ('0' + now.getMinutes()).slice(-2),
                ('0' + now.getSeconds()).slice(-2)
              ].join(':')
            )
            data.push(Math.round((Math.random() - 0.5) * 600))
          }
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('main'))
          // 绘制图表
          myChart.setOption({
            tooltip: {
              trigger: 'axis',
              position: function (pt) {
                return [pt[0], '10%']
              }
            },
            title: {
              left: 'center',
              text: '大数据量面积图'
            },
            toolbox: {
              feature: {
                dataZoom: {
                  yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: date
            },
            yAxis: {
              type: 'value',
              boundaryGap: [0, '100%']
            },
            series: [
              {
                name: '模拟数据',
                type: 'line',
                smooth: true,
                symbol: 'none',
                sampling: 'average',
                itemStyle: {
                  color: 'rgb(255, 70, 131)'
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgb(255, 158, 68)'
                    },
                    {
                      offset: 1,
                      color: 'rgb(255, 70, 131)'
                    }
                  ])
                },
                data: data
              }
            ]
          })
        }
      },
      beforeDestroy () {
        clearInterval(this.timer)
        this.timer = null
      }
    }
    </script>
    
    <style scoped>
    </style>

5、运行项目：`npm run dev`，浏览器打开 [http://localhost:8080][http_localhost_8080]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70]

[http_localhost_8080]: http://localhost:8080
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70]: /images/20220201/3919ace5bd204335b52f48d86b416301.png