echarts的中文文档地址:https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

采用按需引入的方式

安装echarts包就不说了,上一篇有代码

今天来看看如何画饼状图

<template>
<div>
<div class="pie">
<div id="pie1">
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main1" style="float:left;width:100%;height: 300px"></div>
</div>
<div id="pie2">
<div id="main2" style="float:left;width:100%;height: 300px"></div>
</div>
</div>
</div>
</template> <script>// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title') export default {
created(){
},
mounted(){
this.initData();
},
methods:{
//初始化数据
initData() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main1'));
// 绘制图表
myChart.setOption({
title : {
text: '某站点用户访问来源',//主标题
subtext: '纯属虚构',//副标题
x:'center',//x轴方向对齐方式
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
bottom: 'bottom',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
},
}
}
</script>

效果图

具体设置请参考 官网

vue中使用echarts画饼状图的更多相关文章

  1. 利用Tkinter和matplotlib两种方式画饼状图

    当我们学习python的时候,总会用到一些常用的模块,接下来我就详细讲解下利用两种不同的方式画饼状图.首先利用[Tkinter]中的canvas画布来画饼状图: from tkinter import ...

  2. Vue中使用ECharts画散点图加均值线与阴影区域

    [本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...

  3. canvas+js画饼状图

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. Echarts生成饼状图、条形图以及线形图 JS封装

    1.在我们开发程序中,经常会用到生成一些报表,比方说饼状图,条形图,折线图等.不多说了,直接上封装好的代码,如下Echarts.js所示 以下代码是封装在Echarts.js文件中 /** * Cre ...

  5. WPF、Silverlight项目中使用柱状图、饼状图、折线图

    在开发的过程中,可能会遇到柱状图.饼状图.折线图来更好的显示数据,最近整理了一下,遂放出来望需要的朋友可以参考.本文仅仅是简单显示,如需复杂显示效果请参考官网代码示例.----本文代码使用WPF,Si ...

  6. 在vue中使用Echarts画曲线图(异步加载数据)

    现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...

  7. python plotly 画饼状图

    代码 import pandas as pd import numpy as np import plotly.plotly as py import plotly.graph_objs as go ...

  8. echarts pie饼状图绑定点击事件

    var valueData = [ {value: 33,name: '诊所'}, {value: 29,name: '汽车服务相关'}, {value: 27, name: '洗衣店'}, {val ...

  9. Python数据可视化:画饼状图、折线图、圈图

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. from math import pi import matplotlib ...

随机推荐

  1. (四)Redis之哈希

    一.哈希常用命令 赋值 取值 删除 增加数字 判断字段是否存在 获取hash属性个数 获取hash所有属性名称 1.2.3 赋值取值和删除 package myRedis01; import java ...

  2. (三)springmvc之注解的基本使用

    一.@Controller @Controller 标记一个类是Controller 二.RequestMapping  地址映射 2.1 Value的操作. 注解在类上面    (父)       ...

  3. 在论坛中出现的比较难的sql问题:8(递归问题 树形结构分组)

    原文:在论坛中出现的比较难的sql问题:8(递归问题 树形结构分组) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得有必 ...

  4. adminMongo:mongoDB node GUI(mongoDB图形化界面)

    adminMongo:mongoDB node GUI(mongoDB图形化界面) 获取项目项目 克隆:git clone https://github.com/mrvautin/adminMongo ...

  5. 验证 vector = 是深拷贝还是浅拷贝

    #include <vector> using namespace std; int main() { int w=1920; int h = 1080; vector<int> ...

  6. 升级xcode11&ios13的坑

    Swift Packages 目前Pod跟SPM的兼容还没做好,配置好SPM后,Pod不能进行正常更新,先配置好Pod再集成SPM则没有问题 Pod以后的更新可能会解决这个问题,也会有越来越多的库支持 ...

  7. 虚拟机和hadoop

    摘要:VMware虚拟机安装Win10,Win10用虚拟机安装教程 微软发布Win10预览版下载地址后,用WMware虚拟机安装Win10是很好的选择.如何用VMware虚拟机安装Win10,Win1 ...

  8. 10 Windows编程——鼠标消息

    和鼠标相关的三个属于:click,double-click,drag 鼠标消息和键盘消息不同:只要鼠标跨越某个窗口,或者在某个窗口中按键,消息. 客户去鼠标消息 WM_MOUSEMOVE WM_[L, ...

  9. springmvc,hibernate整合时候出现Cannot load JDBC driver class 'com.mysql.jdbc.Driver

    原因:不清楚是什么原因,哪位知道可以给我留言,不胜感激! 解决方法: 1.把mysql的驱动包放到你项目的WEB-INF目录下的lib目录中2.要mysql的驱动包放在tomcat/lib目录下

  10. Python多线程爬虫爬取网页图片

    临近期末考试,但是根本不想复习!啊啊啊啊啊啊啊!!!! 于是做了一个爬虫,网址为 https://yande.re,网页图片为动漫美图(图片带点颜色........宅男福利 github项目地址为:h ...