Vue使用快速使用Echarts图标以及使用水滴图

组件aaaa.vue

<template>
<div class="aaaa"><!-- <button @click="refresh">更新数据</button> -->{{eachertsdata.series[0].data[0]}}<div id="main" style="width:300px;height:500px"></div>
</div>
</template><script>import * as echarts from 'echarts';import {BarChart
} from 'echarts/charts';
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {TitleComponent,TooltipComponent,GridComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {CanvasRenderer
} from 'echarts/renderers';echarts.use([TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);export default {props:['eachertsdata'],methods:{// refresh(){//     myChart.setOption(this.eachertsdata);// }getecharts(){var myChart = echarts.init(document.getElementById('main'));// 绘制图表myChart.setOption(this.eachertsdata);}},data(){return{value1:0,// eachertsdata:{//     title: {//     text: 'ECharts 入门示例'// },// tooltip: {},// xAxis: {//     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']// },// yAxis: {},// series: [{//     name: '销量',//     type: 'bar',//     data: [5, 20, 36, 10, 10, 20]// }]// }}},mounted(){this.getecharts()},watch:{eachertsdata:{handler(val) {this.getecharts(val);},deep: true}}}
</script>

app.vue

<template><div class="app"><div class="block"><span class="demonstration">默认</span><el-slider v-model="eachertsdata.series[0].data[0]"></el-slider></div><br><br><aaaa :eachertsdata="eachertsdata"></aaaa></div>
</template><script>
import aaaa from './components/aaaa.vue'
export default {components:{aaaa},data(){return{eachertsdata:{title: {text: 'ECharts 入门示例'},tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]}}}}
</script>

使用水滴图需要额外安装echarts-liquidfill插件

<template><div class="aaaa"><div id="main" style="width:1000px;height:700px"></div></div>
</template><script>import * as echarts from 'echarts';
import 'echarts-liquidfill'export default {data(){return{}},mounted(){var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;option = {series: [{type: 'liquidFill',data: [0.3],outline: {show:false}}]
};option && myChart.setOption(option);}}
</script>

水滴图具体操作可以参考这篇文章：https://blog.csdn.net/u014636245/article/details/83267883

Vue使用快速使用Echarts图标以及使用水滴图相关推荐

vue项目中使用echarts完成图表类的开发之饼图，环形图
最近在vue项目中使用echarts.js完成诸如饼图,环形图,折线图,折线图加柱状图,和柱状图(水平柱状图和垂直柱状图),以及柱状图堆叠,下面请看图片展示: 如上图所示基本上echarts的简单图表 ...
go html vue,用Go+Vue.js快速搭建一个Web应用(初级demo)
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文给大家介绍用Go+Vue.js快速搭建一个Web应用(初级demo). 环境准备: 1. 安装go语言,配置go开 ...
「后端小伙伴来学前端了」Vue中学会使用Echarts生成各种各样的图表，得学学了，必须要会的基本操作了
依旧还是学妹给的封面直接进入主题-在vue中使用个啥,都差不多是一个流程. 引入Echarts 安装 npm install echarts --save 我们写一个Echarts组件,在内进行引入 ...
vue项目中使用 Echarts的一些总结，包括饼图，折现图，折柱混图，年月日切换
先奉上官网地址,一切以官网为主 Echrts官网 Echarts的基本使用安装 cnpm i echarts -S 全局使用在main.js中引入,然后用变量,将其挂载到vue的原型上 impor ...
vue文件快速生成模板代码
vue文件快速生成模板代码输入 vue 按 tab 键
.NET Core实战项目之CMS 第六章入门篇-Vue的快速入门及其使用
写在前面上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
[vue] 有在vue中使用过echarts吗？踩过哪些坑？如何解决的？
[vue] 有在vue中使用过echarts吗?踩过哪些坑?如何解决的? vue 没用过echarts react到是用过不过我想应该差不多 ,多注意dom的渲染时机和chart的实例化时机在相 ...
Vue项目中使用Echarts（二）
1. 安装: 通过 npm 获取 echarts,npm install echarts --save 2. 最终页面展示效果如下: 三.代码实现 map-demo.vue: <template ...
（vue基础试炼_01）使用vue.js 快速入门hello world
文章目录一.需求案例二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法三.案例vue简述? 四.案例趣味延伸五.表达值作用及嘱咐语一. ...

Vue使用快速使用Echarts图标以及使用水滴图

Vue使用快速使用Echarts图标以及使用水滴图相关推荐

最新文章

热门文章