欢迎光临散文网 会员登陆 & 注册

vue实现曲线图

2022-03-20 22:34 作者:丘奇小怪  | 我要投稿

1、打开cmd,跳转到要创建项目的文件夹

 命令:cd /d 文件夹位置

2、创建项目

命令: vue init webpack 项目名

3、在vscode中打开项目文件夹,新建终端,下载ehcarts,最好下载4.9.0版本,5.0易出错。


 命令:npm install echarts@4.9.0

5、在src文件夹中新建文件myCharts.js(名称可以随意取)

代码:

import echarts from 'echarts'

const install = function (Vue) {

  Object.defineProperties(Vue.prototype, {

    $chart: {

      get () {

        return {

          // 画一条简单的线

          line1: function (id) {

            this.chart = echarts.init(document.getElementById(id))

            this.chart.clear()


            const optionData = {

              xAxis: {// x轴

                type: 'category',

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

              },

              yAxis: {// y轴

                type: 'value'

              },

              series: [{

                data: [820, 932, 901, 934, 1290, 1330, 1320],

                type: 'line',

                smooth: true

              }]

            }


            this.chart.setOption(optionData)

          }

        }

      }

    }

  })

}


export default {

  install

}

6、在main.js中引入myCharts.js,echarts已经在myCharts.js中引入过了

代码:

import myCharts from 'F:/myvue/HelloWorld/src/myCharts.js'(myCharts地址,最好用绝对地址)

Vue.use(myCharts)

6、修改components文件夹中的HelloWorld.vue

代码:

<template>

  <div class="hello">

    <div id="chart1"></div>

  </div>

</template>


<script>

export default {

  name: 'HelloWorld',

  data () {

    return {

    }

  },

  mounted() {

    this.$chart.line1('chart1');

  }

}

</script>


<style scoped>

  #chart1 {

    width: 300px;

    height: 300px;

  }

</style>

7、删除APP.vue中的<img src="./assets/logo.png">

8、在服务器中运行项目,终端中输入npm run dev

拙劣的模仿。


vue实现曲线图的评论 (共 条)

分享到微博请遵守国家法律