首先,你需要安装echarts和echarts-liquidfill这两个库。你可以使用npm或yarn来安装它们: bash npm install echarts echarts-liquidfill 或者 bash yarn add echarts echarts-liquidfill 在Vue项目中引入echarts和echarts-liquidfill 在你的Vue项目中,你需要在需要使用水球图的组件中引入echarts和echarts-liquidfill...
}.liquidfill-container{width:100%;height:100%;} 3. itemStyle,emphasis 属性分别给其中一个波浪设置透明度以及 hover 后的样式 <template></template>import'echarts-liquidfill'exportdefault{ name:'LiquidfillTest', mounted () { const data=[0.68,0.5, {//如果只想给其中某一个波浪,比如最后一个波浪设置...
npm install echarts-liquidfill--save 或 yarnaddecharts-liquidfill--save 使用 在需要使用水晶球的组件里引入liquidFill.js import'echarts-liquidfill/src/liquidFill.js'; 在模板中加入挂载水晶球的DOM节点 <template></template>#echarts { width: 500px; height: 500px; position: absolute; top: 0; left:...
1.封装 echarts 组件 1.安装 echarts 所需 npm 包,如下。 npm i echarts@5.4.3 npm i echarts-liquidfill@3.1.0 //社区图等 npm i @vueuse/core@10.7.1 //一些好用的hook 2.封装 echarts
vue2.0使用echarts-liquidfill问题 nicorandil_cav 11311733 发布于 2017-09-18 <template> </template> import echarts from 'echarts' import 'echarts-liquidfill/src/liquidFill.js' import mixinBase from '../../mixins/mixin-base.js' export default { name: 'ChartLiquid', mixins: [mixinBase...
"echarts": "^4.1.0", "echarts-liquidfill": "^2.0.2", "element-ui": "^2.6.1", "jquery": "^3.4.1", "moment": "^2.26.0", "node-sass": "^4.11.0", "nprogress": "^0.2.0", "sass-loader": "^7.1.0", "video.js": "^7.6.0", ...
# 安装 echarts-liquidfill npm i echarts-liquidfill 引入注册 在项目中引入,编辑main.js: import Vue from 'vue' import App from './App.vue' import dataV from '@jiaminghi/data-view' import * as echarts from 'echarts' import 'element-ui/lib/theme-chalk/index.css'; ...
webpack.base.conf.js module.exports = { externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', 'echarts': 'echarts', 'echarts-liquidfill': 'echarts-liquidfill', 'vue-echarts': 'VueECharts', 'axios': 'axios', 'alia...
先上效果图1.在项目中安装依赖npmiecharts-liquidfill -s 2.在组件中引入需要的echarts水球图插件import echartsLiquidfill from 'echarts-liquidfill' 3.创建一个容器安置图形(设置好宽高)
importVuefrom'vue'importAppfrom'./App.vue'importdataVfrom'@jiaminghi/data-view'import*asechartsfrom'echarts'import'element-ui/lib/theme-chalk/index.css';importaxiosfrom'axios'// 引入 echarts 水球图import'echarts-liquidfill'importVueRouterfrom'vue-router'import{Icon,Row,Col,Table,TableColumn,Butt...