vue-echarts-v3的使用，支持组件 resize 事件自动更新视图（echarts不支持）

以你之姓@ 2024-04-19 10:14 39阅读 0赞

## 1、定义 ##

### option定义在data里面（如果后续某个事件内，改变了option里面的series\[i\].data的值，图表会自动刷新）： ###

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

### option\_hsl 内容为echarts官网例子里面的定义option部分：series里面的data可以通过后台接口动态渲染 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 1]  
*定义一个事件，来改变series\[i\].data的值，测试是否会自动刷新图表*  
![在这里插入图片描述][20190917140143281.png]![在这里插入图片描述][20190917140204494.png]  
*点击前：*![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 2]  
*点击后：*![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 3]

## 2、使用： ##

*  npm install --save echarts vue-echarts-v3
 *  在使用的组件内引入 import IEcharts from ‘vue-echarts-v3/src/full.js’
 *  ![在这里插入图片描述][20190917105044539.png]

一定要设置高度，不然统计图无法显示出来
    <div  :style="{600+'px'}">
    	 <IEcharts
       		:option="option_hsl"   //echarts官网案例里面的option部分的内容
       		:loading="loading1"   //加载圈圈，值为true或false
       		:loadingOpts="chart_loading_options"  //设置加载数据时候的文字和样式
       		:resizable="true"  //是否自动更新视图
       		@ready="onEchartReady"
       		@click="onEchartClick"  //点击统计图数据部分，触发
        />
    </div>

![在这里插入图片描述][20200410152330506.png]

参考链接：  
https://blog.csdn.net/weixin\_33970449/article/details/88767110  
https://www.cnblogs.com/cag2050/p/7831452.html

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9b92710f974547c5a826107182a236e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/71f494c4bc6d49728fded62bf4c6609e.png
[20190917140143281.png]: https://img-blog.csdnimg.cn/20190917140143281.png
[20190917140204494.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/988c8f5fe6b140a8b715131b909dea97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d5adbc4738b641a8a51762271333ea4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8c758ec00662440ba6af6d2f8a16ea0c.png
[20190917105044539.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d3e01e2b13e048689398071a527e05dc.png
[20200410152330506.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c4e997aca37a43d6bc1b5123a4fa0cb5.png