vue----配置echars

刺骨的言语ヽ痛彻心扉 2023-06-06 08:30 2阅读 0赞

1.安装`npm install echarts -S`  
2.在组件中定义图表容器并初始化数据

// 假设是 index.vue
     // 1. 在template中的html标签中定义容器
     <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
     // 2. 在script中引入
     <script>
         import echarts from 'echarts'
         export default { 
           name: 'Echars',
           mounted () { 
             // 在虚拟dom被渲染之后 初始化图表
             this.initEchats()
           },
           methods: { 
             initEchats () { 
               // 基于准备好的dom，初始化echarts实例
               let myChart = echarts.init(document.getElementById('echarsbox'))
               // 绘制图表
               myChart.setOption({ 
                 title: {  text: '在Vue中使用echarts' },
                 tooltip: { },
                 xAxis: { 
                   data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                 },
                 yAxis: { },
                 series: [
                   { 
                     name: '销量',
                     type: 'bar',
                     data: [5, 20, 36, 10, 10, 20]
                   }
                 ]
               })
             }
           }
         }
         </script>
         ```

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关数据可视化——使用echars图表展示

1. 功能强大，支持多种图表类型；2. 可以灵活定制图表风格；3. 支持数据动态更新和响应式布局。1. 对初学者来说，上手难度较大；2. 部分高级功能需要付费使用。1. ...

小鱼儿/ 2024年05月06日 23:25/ 0 赞/ 96 阅读

相关 React项目搭建与Echars工具使用

React项目搭建与Echars工具使用一、React项目快速搭建 1、新建文件夹

电玩女神/ 2023年10月08日 20:46/ 0 赞/ 63 阅读

相关 Vue 配置vue-router

> 配置vue-router，实现路由懒加载、webpack分模块打包、监听路由显示title //router.js import Vue from 'vu

小鱼儿/ 2023年08月17日 16:18/ 0 赞/ 80 阅读

相关 echars顶部显示数据，并且格式化为百分比

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

快来打我*/ 2023年07月17日 09:47/ 0 赞/ 17 阅读

相关 vue----配置echars

1.安装`npm install echarts -S` 2.在组件中定义图表容器并初始化数据 // 假设是 index.vue // 1. 在temp

刺骨的言语ヽ痛彻心扉/ 2023年06月06日 08:30/ 0 赞/ 3 阅读

相关 Vue使用echars echars数据通过springboot提供

vue安装echars命令 npm install echarts --save 在main.js使用echars import as echarts

叁歲伎倆/ 2022年10月05日 05:55/ 0 赞/ 166 阅读

相关 Echar的学习记录

Echar通常用作统计图表的制作：可以用很简单的代码对报表的实现。不多说开始实践：首先：html 代码： <div id="showEchartBarC

我就是我/ 2022年06月02日 04:28/ 0 赞/ 155 阅读

相关 echars 图表根据容器宽度自适应

首先要创一个echars图表实例。我是用vue写的。 <script> export default \{ data() \{ return \{

迈不过友情╰/ 2021年12月23日 22:57/ 0 赞/ 359 阅读

相关 echars visualMap属性设置

visualMap = [ //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize:

小鱼儿/ 2021年07月26日 22:22/ 0 赞/ 508 阅读

相关 echars柱形图开发常见功能

刚做echars 和没做过echars的小白分享下经验这个是横向的树形图双柱形图(重点看带大括号的属性) 我讲的通俗点 ![在这里插入图片描述][waterma

蔚落/ 2021年07月24日 15:56/ 0 赞/ 366 阅读