elementUI + echar 实现饼图效果

（在VUE + elementUI项目中）

今日的练习项目

需求：

1 两个echar图表（饼图）（柱形图）

2 展示输入的数据（两个录入按钮）

3 两组拖动效果

环境准备：

echarts :

npm install echarts -S//或者npm install echarts --save

代码：

HTML 部分：

准备一个拥有宽高的IDV

id选择器的作用在于将渲染后的输出写在DOM上


<template><!--占位子-->
<div id="echarts_box" style="width: 600px;height:400px;"></div>
</template>

JS 部分：

引入 echarts

import echarts from "echarts";

模版网站：Examples - Apache ECharts

在网站中修改好想要的样式之后复制到mounted 中即可

整体代码：

<template><div class="home"><p>this is home.vue</p><div class=""><el-button type="primary" @click="aaa">临时按钮</el-button><el-button type="text" @click="dialogVisible = true">录入数据</el-button><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></div><!--条形图--><div style="display: flex;width: 100%"><div id="mainA" style="width: 50%;height: 500px"></div></div></div>
</template><script>export default {name: "Home",components: {},data() {return {inpContent: '',dialogVisible: false}},mounted() {this.$nextTick(() => {this.cc();});},methods: {//dialoghandleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});},aaa() {console.log(this)},cc() {let echarts = require('echarts');let chartDom = document.getElementById('mainA');let myChart = echarts.init(chartDom);let option;option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)'}}]};option && myChart.setOption(option);}}
}
</script><style scoped></style>

elementUI + echar 实现饼图效果相关推荐

[css] 用css实现饼图效果
[css] 用css实现饼图效果方法一.使用伪元素 + transform + css渐变实现.pie {width: 100px;height: 100px;border-radius: 50%; ...
react + zarm + antV F2 实现账单数据统计饼图效果
需要实现的效果为了方便展示,饼图放到右边标明: 实现过程这里我们尝试用一下 antV F2 移动端可视化引擎来实现饼图效果 1.F2 移动端可视化引擎 F2 是一个专注于移动端,面向常规统计图表, ...
echarts 饼图效果，显示其对应数值及百分比
需求:echarts 饼图效果,显示其对应数值及百分比代码 <Chart1 :ecStyle="ecStyle" :ecOption="optionRight2& ...
vue element-ui 前端实现分页效果
vue element-ui 实现前端处理分页 1.使用el-pagination分页插件 !--分页条--><div class="page"><el-p ...
分析攻击IP来源地并画出饼图
版权声明:本文可能为博主原创文章,若标明出处可随便转载. https://blog.csdn.net/Jailman/article/details/80508954 此文中的API将台湾列为国家,非 ...
饼图的引导线怎么加_4步学会EXCEL复合条饼图制作方法，让统计结果更直观！
饼图能够形象生动的展示各种类别数据的占比,在类别较多的情况下,单一饼图会显得很凌乱,降低了数据的对比效果,这个时候复合条饼图就可以让统计结果更直观,数据更清晰. 一.复合条饼图效果复合条饼图的特点: ...
IOS开发基础之绘制饼图、柱状图、自定义进度条
IOS开发基础之绘制饼图.柱状图.自定义进度条源码在我的主页里 1.绘制饼图效果源码 // LJView.m // 34-绘图饼图 // Created by 鲁军 on 2021/2/23. ...
用excel制作双层饼图_双层饼图，让你的工作更出彩
在Excel中饼图是很常见的图表类型,做起来也很简单,相信大家都会做.但双层饼图你会做吗?如下图所示,根据左侧的数据源,做出右侧的双层饼图.这么漂亮的双层饼图是怎么制做出来的呢?今天我就来给大家分享一 ...
html一个页面同时加载多个饼图,Html5饼图绘制实现统计图的方法
Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图(统计图)的方法.先看一下饼图效果: 这个图是动态生成的,根据传入的比例参数( ...
多个vue项目之间跳转_Vue六，路由，ElementUI
内容大纲安装路由配置路由路由对象router:页面跳转,传递参数 ElementUI 知乎视频www.zhihu.com 前端项目笔记为什么要在linex中开发? 1.公司服务器是line ...

elementUI + echar 实现饼图效果

elementUI + echar 实现饼图效果相关推荐

最新文章

热门文章