vue调用Echarts

谁借莪１个温暖的怀抱￠ 2022-09-06 10:12 124阅读 0赞

vue Echarts 在此记录：

<div class="ri_echir" ref="chart">
    
     </div>

let Echarts = require('echarts/lib/echarts'); //基础实例 注意不要使用import
    require('echarts/lib/chart/pie'); //按需引入 bar = 柱状图
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/legend');
    
     data() {
          return {
            chart: null
          }
        }, 
     mounted() {
          this.init()
        },
    init() {
            //2.初始化
            this.chart = Echarts.init(this.$refs.chart);
            //3.配置数据
            let option = {
              // title: {
              //   text: '某站点用户访问来源',
              //   subtext: '纯属虚构',
              //   left: 'center'
              // },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left',
              },
              series: [{
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: [{
                    value: 1048,
                    name: '在招职位'
                  },
                  {
                    value: 735,
                    name: '待面试'
                  },
                  {
                    value: 580,
                    name: '已拒绝'
                  },
    
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }]
            };
            // 4.传入数据
            this.chart.setOption(option);
          }

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue 配置 echarts

ECharts，一个使用 JavaScript 实现的开源可视化库。提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图...

比眉伴天荒/ 2024年04月17日 19:34/ 0 赞/ 48 阅读

相关【Vue】Vue 中引入 ECharts

目录 1、安装 2、在 main.js 中引入 3、在需要调用的页面中的 js 使用 4、最重要的一点！ -------------------- 介绍 Echa

谁践踏了优雅/ 2023年07月11日 08:41/ 0 赞/ 15 阅读

相关 echarts中graphic_vue项目中引入echart 调用其graphic方法报错的问题

index.js中引入echart ![Image 1][] 在页面当中想要使用echart方法 const lineOpts = \{ //鼠标移上去时的提示框 t

╰+攻爆jí腚メ/ 2023年01月09日 03:38/ 0 赞/ 194 阅读

相关 Vue echarts 入门

Vue使用 echarts 1. 安装 npm install echarts --save 1. 引入 `main.js` import e

以你之姓@/ 2022年12月22日 11:10/ 0 赞/ 161 阅读

相关 Vue---Vue集成HighCharts、Echarts

HighCharts 安装HighCharts npm install highcharts --save 创建公共子组件commonChart.

左手的ㄟ右手/ 2022年12月10日 08:48/ 0 赞/ 179 阅读

相关 vue2+ts+vue-echart+echart+echarts-liquidfill.js: 画水球图

vue-echart 和 echart的安装参考上文链接 https://blog.csdn.net/u014686399?spm=1003.2018.

冷不防/ 2022年11月12日 11:52/ 0 赞/ 243 阅读

相关 vue调用Echarts

vue Echarts 在此记录： <div class="ri_echir" ref="chart"> </div> let Echa

谁借莪１个温暖的怀抱￠/ 2022年09月06日 10:12/ 0 赞/ 125 阅读

相关 vue中引入echarts

一、全局引入 1.通过以下命令安装Echarts ![在这里插入图片描述][20190429213452843.png] 2.main.js中引入echarts 和

骑猪看日落/ 2022年04月24日 22:10/ 0 赞/ 411 阅读

相关 vue引入echarts

效果图: ![1263537-20190703092539204-1883224357.jpg][] 1.安装Echarts : npm ins

喜欢ヅ旅行/ 2021年11月11日 01:40/ 0 赞/ 464 阅读

相关 echarts外部触发echarts事件 VUE

//显示事件 listMousEnter(event){ event.target.style.backgroundColor='f00

左手的ㄟ右手/ 2021年09月07日 06:12/ 0 赞/ 846 阅读