Vue echarts 入门

以你之姓@ 2022-12-22 11:10 149阅读 0赞

## Vue使用 echarts ##

1.  安装

npm install echarts --save

1.  引入

`main.js`

import echarts from 'echarts';
    Vue.prototype.$echarts = echarts;

1.  使用

> 注意： 必须制定宽度和高度，宽度可以是继承父元素

<template>
      <div id="main">
        <div ref="myEcharts" style="width:500px;height: 300px;">
        </div>
      </div>
    </template>
    
    <script>
    export default { 
      mounted(){ 
        this.init();
      },
      methods: { 
        init() { 
          let myChart = this.$echarts.init(this.$refs.myEcharts));
          // 绘制图表
          let option;
          option = { 
            title: { 
              text: 'ECharts 入门示例'
            },
            tooltip: { },
            legend: { 
              data:['销量']
            },
            xAxis: { 
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: { },
            series: [{ 
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          };
    
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        }
      }
    }
    </script>

1.  效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center]

> 帮助到你的话，点个赞，鼓励一下，欢迎加入我的置顶博客设置的技术交流群。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/dc2e74c015214d86a58619b00bee6440.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue 配置 echarts

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

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

相关 Vue echarts 入门

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

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

相关初遇Echarts之Echarts入门

初次使用Echarts 首先咱们来说说什么是Echarts，用途是什么——ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需

￡神魔★判官ぃ/ 2022年11月27日 03:24/ 0 赞/ 185 阅读

相关 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 赞/ 228 阅读

相关 vue调用Echarts

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

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

相关 ECharts介绍入门

一、ECharts介绍现在主流的web图表控件主要有hightchart、fusionchart、echart； echart作为百度前端部门近期推出的一个基于ht

小鱼儿/ 2022年06月14日 07:24/ 0 赞/ 165 阅读

相关 echarts入门笔记

echarts学习笔记一、在echarts官网下载相应的版本二、在网页中引入echarts .表示当前的文件夹下的 ..表

小咪咪/ 2022年05月22日 07:22/ 0 赞/ 200 阅读

相关 vue引入echarts

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

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

相关 echart入门案例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

以你之姓@/ 2021年07月26日 22:35/ 0 赞/ 521 阅读

相关 echarts 入门配置

非vue引入echarts.js文件 echarts必须要有个有高宽的容器来盛放地图 vue中配置: 1、cnpm

悠悠/ 2021年07月24日 21:10/ 0 赞/ 412 阅读