Echarts之圆饼图用法

  • css代码
  • html代码
  • js代码

css代码

 #chartone {float: left;margin-left: -50px;height: 159px;width: 300px;}

html代码

  <div id="chartone"></div>

js代码

 <script>// 饼状图var myChart = echarts.init(document.getElementById('chartone'));//init初始化接口,返回ECharts实例,其中dom为图表所在节点option = {//改变图表样式legend: {orient: 'vertical',right: 10,top: 40,// 设置icon大小itemWidth: 9,data: [{name: '入侵目标',textStyle: {fontSize: 12,color: 'white'},icon: 'circle'}, {name: '备案目标',textStyle: {fontSize: 12,color: 'white'},icon: 'circle'}],},//饼状图样式series: [{// 鼠标经过不放大hoverAnimation: false,name: '访问来源',type: 'pie',radius: ['50%', '70%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '15',fontWeight: 'bold'}},labelLine: {show: false},data: [{value: 335, name: '入侵目标', itemStyle: {color: '#6dcff6'}},{value: 310, name: '备案目标', itemStyle: {color: '#0e6de9'}},]}]};myChart.setOption(option);// 为echarts对象加载数据</script>

Echarts之圆饼图用法相关推荐

  1. echarts的圆饼图自定义颜色

    圆饼图自定义颜色 1.在HTML中的代码: <div id="echartZB" style="width:400px;height:600px;margin-le ...

  2. canvas画条形图 微信小程序_小程序-引入 echart 图表画圆饼图

    前言 在 web 中引入echart可视化图表是很常见的操作,那在小程序当中又如何引入使用呢 示例效果 完整示例效果-可以点击此处查看 下载使用 ec-canvas 在github上下载echarts ...

  3. 前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图

    Vue接入Echarts 显示柱状图饼图 使用CLI接入 npm install echarts --save 1.可以全局引入(在main.js) // 引入echarts import echar ...

  4. 在DataGridView控件中一次显示出多个圆饼图的原始程序代码

    之前我们曾经提到过,您可以在Windows Form窗体上的一个DataGridView控件中一次显示出多个圆饼图(或其它形式的统计图表)以便能够一次检视多个群组数据的比例情况(如图表1所示).当时并 ...

  5. Android自定义睡眠下表统计图,Android 进阶自定义View(5)图表统计PieChartView圆饼图的实现...

    今天讲图表统计中比较常用的一个,像支付宝的月账单啥的,都是用圆饼图来做数据统计的,先看一下我最终实现的效果图: image.png 该效果实际上是两个实心圆叠加后的效果. image.png imag ...

  6. vue 使用echarts实现3D饼图和环形图

    记录一下echarts实现3d饼图和环形图功能## 标题 实现效果 首先第一步安装echarts和echarts-gl npm install echarts echarts-gl安装最新版本可能会有 ...

  7. C# 控件Chart的 圆饼图百分比

    开发环境: 基于 VS2019 基于C#语言 解决问题 用C# 控件Chart 画出 圆饼图百分比,很直观 结果展示 4.源代码下载地址: https://download.csdn.net/down ...

  8. Obiee+echarts实例之饼图(2)

    一.效果图 1.这是用Obiee + echarts做出来的饼图,效果如图: 2.数据(仅供参考),如图: 二.代码解析 //前缀 <!-- 引入 ECharts 文件 --> <s ...

  9. pyecharts常见柱状图、圆饼图、散点图

    今天带大家认识一下pyecharts中常用的三种视图的画法.更多的是认识一下基本的配置项,避免走太多的坑.当然都是些常用的配置项,如果有奇怪的需求,大家自行查找.. 当然前提是必须先安装了pyecha ...

最新文章

  1. 企业级 SpringBoot 教程 (四)SpringBoot 整合JPA
  2. mysql与串口通信_虚拟机串口与主机串口通信·小程序(下)
  3. ai作文批改_好未来:AI智能批改中英文作文为老师“减负”
  4. tshark 和 tcpdump 的区别
  5. BZOJ 2708 [Violet 1]木偶 DP
  6. 使用STS临时访问凭证访问OSS
  7. 使用ef查询有缓存的问题
  8. 如何实现SSID白名单管控
  9. 彩灯控制器课程设计vhdl_EDA课程设计彩灯控制器
  10. 怎么学习PLC技术?
  11. html hr 垂直居中,常见的CSS水平垂直居中设置
  12. Windows更改鼠标滚轮的滚动速度(系统各个软件中上下翻页的速度)
  13. 安卓刷机及刷机包制作教程
  14. 使用Origin绘制柱状图(入门)
  15. Redis 哨兵模式安装方法
  16. 【EXLIBRIS】纸版书目整理 -- 增补至2008年春节【36 种】【36 册】
  17. 微信支付V3版商家转账到零钱
  18. vue.js——ElementUI表单向后台提交FormData数据
  19. 基于SSM的超市会员管理系统
  20. 【SVN】windows SVN安装使用教程(服务器4.3.4版本/客户端1.11.0版本)

热门文章

  1. android o机型,不分机型:所有安卓用户均可升级Android O
  2. 机器学习算法 03 —— 逻辑回归算法(精确率和召回率、ROC曲线和AUC指标、过采样和欠采样)
  3. Python分布式爬虫框架Scrapy实战
  4. 再见HTML ! 用纯Python就能写一个漂亮的网页
  5. JavaWeb开发酒店管理系统 中山大学南方学院
  6. 创始股东四招掌握公司控制权
  7. 基于yolov5实现FPS游戏自瞄,理论上通杀所有射击游戏
  8. HtmlUnit抓取Ajax网页,例子是去哪儿机票
  9. 圆框头像html,自制带圆框的头像
  10. 使用HttpClient和Jsoup爬取京东商城关键字搜索的商品页面