vue整合echarts

最新推荐文章于 2024-08-14 09:31:25 发布
最新推荐文章于 2024-08-14 09:31:25 发布
阅读量288 收藏
点赞数
分类专栏： vue 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_38225647/article/details/120639835
版权

ant design admin中使用echarts。

添加依赖

npm install echarts -S

main.js中import

import * as echarts from 'echarts'
// 集成echarts
Vue.prototype.$echarts = echarts

使用

封装成组件

以柱状图为例。
BarChart.vue

<template>
    <div id="main" style="width: 90%; height: 400px"></div>
</template>
<script>
export default {
  name: 'BarChart',
  components: {},
  props: {
    title: {
      type: String,
      default: '菜单数量'
    },
    xAxisData: {
      type: Array,
      default: function () {
        return []
      }
    },
    seriesData: {
      type: Array,
      default: function () {
        return []
      }
    },
    legendData: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    drawChart () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('main'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: this.title || '菜单数量'
        },
        tooltip: {},
        legend: {
          data: this.legendData || [],
          orient: 'horizontal',
          align: 'auto',
          type: 'scroll'
        },
        xAxis: {
          data: this.xAxisData || []
        },
        yAxis: {},
        series: this.seriesData || []
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      const that = this
      // 绑定点击事件
      myChart.on('click', function (params) {
        // 显示model
        that.$parent.showModal(params)
      })
    }
  },
  mounted () {
    this.drawChart()
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>

引入

Echart1.vue

<template>
  <div>
    <line-chart title='用户数据' :seriesData='seriesDataLine' :xAxisData='xAxisDataLine'/>
    <bar-chart title='菜单数量' :seriesData='seriesData' :xAxisData='xAxisData' :legendData='legendData'/>
    <bar-chart-2 title='按钮数量' :seriesData='mbSeriesData' :xAxisData='mbXAxisData' :legendData='mbLegendData'/>
    <detail-modal ref="modal"/>
  </div>
</template>
<script>
import DetailModal from './DetailModal'
import BarChart from './BarChart'
import BarChart2 from './BarChart2'
import LineChart from './LineChart'

export default {
  name: 'Echart1',
  components: {
    DetailModal,
    BarChart,
    BarChart2,
    LineChart
  },
  data () {
    return {
      // 条形图数据
      seriesData: [
        {
          name: '菜单0',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 20]
        },
        {
          name: '菜单1',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 20]
        },
        {
          name: '菜单2',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 20]
        },
        {
          name: '菜单3',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 20]
        },
        {
          name: '菜单4',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 20]
        },
        {
          name: '菜单5',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 20]
        },
        {
          name: '菜单6',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 20]
        },
        {
          name: '菜单7',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 20]
        },
        {
          name: '菜单8',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 20]
        },
        {
          name: '菜单9',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 20]
        }
      ],
      xAxisData: ['2021/10/01', '2021/10/02', '2021/10/03', '2021/10/04', '2021/10/05', '2021/10/06', '2021/10/07'],
      legendData: ['菜单0', '菜单1', '菜单2', '菜单3', '菜单4', '菜单5', '菜单6', '菜单7', '菜单8', '菜单9'],
      // 折线图数据：天为单位，小于一天小时为单位
      xAxisDataLine: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
      seriesDataLine: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 12, 12, 19],
      // xAxisDataLine = ['2021/10/01', '2021/10/02', '2021/10/03', '2021/10/04', '2021/10/05', '2021/10/06', '2021/10/07']
      // seriesDataLine = [40, 56, 20, 56, 15, 60, 76],
      // 按钮
      mbSeriesData: [
        {
          name: '按钮0',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '按钮1',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '按钮2',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '按钮3',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '按钮4',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '按钮5',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ],
      mbXAxisData: ['2021/10/01', '2021/10/02', '2021/10/03', '2021/10/04', '2021/10/05', '2021/10/06'],
      mbLegendData: ['按钮0', '按钮1', '按钮2', '按钮3', '按钮4', '按钮5']
    }
  },
  methods: {
    showModal (params) {
      console.log('params:')
      console.log(params)
      this.$refs.modal.edit({})
    }
  },
  mounted () {}
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>

import 引入组件，components中声明组件，<bar-chart …/>使用组件并传入数值。

其他代码：

BarChart2.vue

<template>
    <div id="BarChart2Id" style="width: 90%; height: 400px"></div>
</template>
<script>
export default {
  name: 'BarChart2',
  components: {},
  props: {
    title: {
      type: String,
      default: '按钮数量'
    },
    xAxisData: {
      type: Array,
      default: function () {
        return []
      }
    },
    seriesData: {
      type: Array,
      default: function () {
        return []
      }
    },
    legendData: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    drawChart () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('BarChart2Id'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: this.title || '按钮数量'
        },
        tooltip: {},
        legend: {
          data: this.legendData || []
        },
        xAxis: {
          data: this.xAxisData || []
        },
        yAxis: {},
        series: this.seriesData || []
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      const that = this
      myChart.on('click', function (params) {
        // 显示model
        that.$parent.showModal(params)
      })
    }
  },
  mounted () {
    this.drawChart()
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>

DetailLineChart.vue

<template>
  <div id="DetailLineChartId" style="width: 98%; height: 400px"></div>
</template>
<script>
export default {
  name: 'DetailLineChart',
  props: {
    title: {
      type: String,
      default: '折线图'
    },
    xAxisData: {
      type: Array,
      default: function () {
        return []
      }
    },
    seriesData: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    drawChart () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('DetailLineChartId'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: this.title || '折线图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['UserNum']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          // feature: {
          //   saveAsImage: {}
          // }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xAxisData || []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'UserNum',
            type: 'line',
            stack: 'Total',
            data: this.seriesData || []
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  },
  mounted () {
    this.drawChart()
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>

DetailModal.vue

<template>
  <a-modal
    title="折线图"
    :width="800"
    :visible="visible"
    @cancel="handleCancel"
  >
    <detail-line-chart title="" :xAxisData="['0', '1', '2', '3', '4', '5', '6']" :seriesData="[120, 132, 101, 134, 90, 230, 210]"/>
  <template slot="footer">{{undefined}}</template>
  </a-modal>
</template>

<script>
import DetailLineChart from './DetailLineChart.vue'

export default {
  name: 'DetailModal',
  components: {
    DetailLineChart
  },
  data () {
    return {
      visible: false
    }
  },
  methods: {
    edit (record) {
      this.visible = true
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>

LineChart.vue

<template>
  <div id="LineChartId" style="width: 90%; height: 400px"></div>
</template>
<script>
export default {
  name: 'LineChart',
  props: {
    title: {
      type: String,
      default: '用户数据'
    },
    xAxisData: {
      type: Array,
      default: function () {
        return []
      }
    },
    seriesData: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    drawChart () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('LineChartId'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: this.title || '用户数据'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['UserNum']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          // feature: {
          //   saveAsImage: {}
          // }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xAxisData || []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'UserNum',
            type: 'line',
            stack: 'Total',
            data: this.seriesData || []
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  },
  mounted () {
    this.drawChart()
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>
沐泽__
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue3 中使用echarts
web18224617243的博客
03-06 5125
在SetUp中使用echarts 在setup中可以直接引入文件 import { onMounted } from "vue"; import * as echarts from 'echarts' export default { name: "data_page", setup() { onMounted(() => {//需要获取到element,所以是onMounted的Hook let myChart = echarts.init(document.getEle
vue+echarts
A123ppleQueen的博客
12-07 856
1.安装 npm install echarts --save-dev 2.在main.js文件中引入 import * as echarts from 'echarts' Vue.prototype.$echarts = echarts 3. 新建一个.vue文件,我是在views文件夹里建了一个Two.vue <template> <div class="two"> <div id="main" style="width: 60...
echarts
weixin_34283445的博客
09-24 422
&lt;div id="main" style="width: 600px;height:400px;"&gt;&lt;/div&gt; &lt;script src="~/lib/echarts/dist/echarts.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt;
Vue 3 中集成 ECharts(附一些案例)
jieyucx的博客
07-05 8340
在现代Web开发中，Vue 3以其卓越的性能和灵活的Composition API赢得了广泛的关注。而ECharts，作为开源的一个使用JavaScript实现的强大可视化库，以其丰富的图表类型和高度可定制性成为了数据可视化的首选工具之一。今天，我们将结合Vue 3的语法糖和ECharts，来详细探讨如何在Vue 3项目中集成ECharts，并不仅仅局限于折线图，而是展示一个通用的集成方法。
vue3中echarts的使用
weixin_42028153的博客
07-11 784
原文链接：https://blog.csdn.net/weixin_43919509/article/details/120570975。
vue3使用echarts
qq_57035859的博客
08-16 2万+
vue3使用echarts
vue3使用ECharts
weixin_52663662的博客
11-28 6796
2、在需要的页面直接引入 ECharts并使用。1、通过 npm 安装 ECharts。
Vue整合echarts(数据可视化)
qq_43620423的博客
09-27 5383
一、安装echarts 使用npm安装echarts npm install echarts -S 二、引入并使用 1、全局引入 在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 创建Echarts.vue <template> <div id="myChart" :style="{width: '300px', height: '300px'}"></d
19年全新elementUI项目实战教程vue整合Echarts后台权限视频教程
06-16
本教程主要围绕2019年全新的Element UI项目实战，结合Vue.js框架，以及Echarts数据可视化库，深入讲解如何构建具有后台权限管理的Web应用。Element UI是基于Vue.js的高质量组件库，提供丰富的UI组件，使得前端开发...
3分钟搞懂Vue整合Echarts实现可视化界面_vue+echarts
2401_84435942的博客
04-28 1374
一个纯JavaScript图表库。ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
全新elementUI项目实战教程Vue整合Echarts后台权限1
08-03
在本教程“全新elementUI项目实战教程Vue整合Echarts后台权限1”中，我们将探讨如何使用Vue.js、ElementUI和ECharts构建一个完整的Web应用。Vue.js是目前非常流行的前端框架，ElementUI则是一个基于Vue的组件库，...
用Vue整合Echarts做数据展示：整合Axios,前后端交互
weixin_43326165的博客
10-04 4872
之前整合Echarts的时候，数据是写死的。为了达到动态的效果，我们只能通过后端生产数据，然后让前端展示。 npm i axios --save 定义交互接口config.js和char.js config.js import axios from "axios" // 定义后端地址 const SERVER_BASE = "http://127.0.0.1:8080/api" /...
在Vue 3项目中使用 echarts
热门推荐
dangfulin的博客
05-01 3万+
记得第一次使用 echarts 还是2019年的时候，那时做的一个物联网项目云平台的前端需要一些数据可视化功能，经过一些对比后就使用了 echarts 。上手非常快，专业性也足够，因此在后来其他的一些项目中就多次用到它。 echarts 是百度基于 JavaScript 实现的一个开源可视化图表库，主要特点就是可视化类型丰富、动画炫酷、使用简单。 这个教程就简单演示如何在 Vue 3 项目中使用 echarts。 一，创建 Vue3 项目并安装 echarts npm 创建项目： npm create u
在Vue3使用Echarts步骤
while1170的博客
03-02 868
7.在TS中创建一个onMounted初始化函数，一进入页面就会调用此函数;并在此调用定义的放图表的函数。也可在页面中单独引入使用：`import * as echarts from ‘echarts’
Vue3 使用ECharts
raphero
08-29 899
Vue3 使用ECharts
Vue3 中使用echarts （七步骤：简单易懂，紧急避坑）
weixin_46022934的博客
05-18 1万+
Vue3 中使用echarts 一、Echars官网地址 二、Echars的创建步骤 第一步：安装echars 第二步：导入echarts 第三步：创建Dom结构 第四步：ref获取创建的Dom结构 第五步：初始化图表 第六步：配置对应的option数据 第七步：setOption方法进行数据的设置 三、完整代码如下（包含父组件中的传值） 父组件（echars父组件传值格式） 子组件（echars子组件封装）
Vue3使用ECharts
最新发布
LMD3349的博客
08-14 750
title: {text: '简单柱状图示例' // 图表的标题},tooltip: {}, // 启用图表的工具提示功能legend: {data: ['销售量'] // 图例显示的项名称},xAxis: {data: ['产品 A', '产品 B', '产品 C', '产品 D', '产品 E'] // X 轴的类目数据},yAxis: {}, // Y 轴的配置项，使用默认配置series: [name: '销售量', // 数据系列的名称。
Vue3 使用 Echarts
备忘璐的博客
04-21 1877
第一种方法 // 下载echarts npm i echarts -S <template> <div id="main" style="width: 600px; height: 400px"></div> </template> <script> import { onMounted } from 'vue' import * as echarts from 'echarts' // 使用echarts export default {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值