ECharts圆环图

想要使用该图表,只需要复制以下代码，再下载 echarts.js 在页面文件中引入即可。

echarts.js 下载链接: http://echarts.baidu.com/download.html

注：本文重点是圆环图各项的数值与占比的显示

// 提示框tooltip: {show: true,                 // 是否显示提示框formatter: '{b} </br> 销量{c}件 </br> 占比{d}%'      // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。},

图表效果如下：

代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>圆环图案例</title><!-- 引入 ECharts 文件 --><script src="js/echarts4.0.js" type="text/javascript" charset="utf-8"></script></head><body><!-- 为 ECharts 准备一个具备大小（宽高）的 容器 --><div id="chart1" style="width: 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #000;"></div></body>
</html>
<script type="text/javascript">// 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例var chart1 = echarts.init(document.getElementById("chart1"));// 圆环图各环节的颜色var color = ['#0000FF', '#00ffff', '#00ff00', '#ffff00'];// 圆环图各环节的名称和值(系列中各数据项的名称和值)var data =[{  name: '其它',value: 320},{name: '休闲裤',value: 586},{name: '女士衬衫',value: 874},{name: '运动服',value: 725}];// 指定图表的配置项和数据var option = {//背景色backgroundColor: {           // 背景颜色type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'rgba(0,0,0,0.4)' // 0% 处的颜色}, {offset: 0.5, color: 'rgba(0,0,0,0.4)'     // 50% 处的颜色}, {offset: 1, color: 'rgba(0,0,0,0.4)' // 100% 处的颜色}],globalCoord: false // 缺省为 false},// 标题title: [{text: '商城各服装销量对比',top:'5%',left:'3%',textStyle:{color: '#000',fontSize:18,}}],// 图例legend: [{selectedMode:true,             // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。top: '10%',left: 'center',textStyle: {                      // 图例的公用文本样式。fontSize: 14,color: '#fff'},data: ['其它','休闲裤','女士衬衫','运动服']}],// 提示框tooltip: {show: true,                 // 是否显示提示框formatter: '{b} </br> 销量{c}件 </br> 占比{d}%'      // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。},// graphic 是原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,graphic: {type: 'text',               // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,top: 'center',              // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。left: 'center',             // 同上style: {text: '各服装销量对比',       // 文本块文字。可以使用 \n 来换行。[ default: '' ]fill: '#fff',           // 填充色。fontSize: 16,           // 字体大小fontWeight: 'bold'     // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'}},// 系列列表series: [{name: '圆环图系列名称',         // 系列名称type: 'pie',                    // 系列类型 center:['50%','50%'],           // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]radius: ['30%', '45%'],         // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]hoverAnimation: true,           // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]color: color,                   // 圆环图的颜色label: {                        // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.normal: {show: true,             // 是否显示标签[ default: false ]position: 'outside',    // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。formatter: '{b} : {c}件'  // 标签内容}},labelLine: {                    // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。normal: {show: true,             // 是否显示视觉引导线。length: 15,             // 在 label 位置 设置为'outside'的时候会显示视觉引导线。length2: 10,            // 视觉引导项第二段的长度。lineStyle: {            // 视觉引导线的样式//color: '#000',//width: 1}}},data: data                      // 系列中的数据内容数组。}]};// 使用刚指定的配置项和数据显示图表chart1.setOption(option)
</script>

ECharts圆环图相关推荐

html5 加速球效果,css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图（360加速球效果）...
说一下知识点: 1.水球是echarts的插件echarts-liquidfill,官网下载-扩展下载中可以拿到,git传送阵https://github.com/ecomfe/echarts-liq ...
echarts 圆环图
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 1.问题 ...
ECharts圆环图(详细示例——满满的注释)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>圆环图 ...
uniapp中封装echarts圆环图
①安装插件市场的echarts图表插件 https://ext.dcloud.net.cn/plugin?id=4899 ②安装后需安装echarts相关依赖: npm install echarts ...
echarts 圆环图中间插图或文字
话不多说,直接上代码: option ={ tooltip: { trigger: 'item' // 鼠标悬浮显示 }, // legend: { // 图例 // top: '5%', // le ...
绘图杂记【10】echarts 圆环图+图片
最终图片图片剪切为圆形图片 https://www.yasuotu.com/editor 或者 http://www.celerstar.com/ProduceDisplay/LogoCreate ...
ECharts 示例——圆环图：数据标签详细设置
当前ECharts版本为5.1.2. 概述按照其他可视化工具中圆环图的默认样式,对ECharts圆环图进行如下设置: 标题:设置标题位于圆环中央,修改标题字体大小和颜色数据标签:修改字体大小.样式 ...
echarts 三环圆环_Echarts饼图之圆环图
需求: 页面上加载一个echarts环形图. 来由: 身为一个Java开发人员,被项目经理拉过来写页面,心里也是很苦逼~可是也没办法,只能硬着头皮干啊,直接上代码 // 基于准备好的dom,初始化ec ...
Vue 中 Echarts绘图在一个圆环图或多个圆环图中间插入图片插入文字（考虑到浏览器大小兼容问题）
之前一直掉进这个坑,没有跳出来,导致自己在这个问题上搞了很久,今天把这个坑写出来,避免大家都去踩这个坑啊~ 在Vue项目结构中,如果引入图片的url不成功,记住,请一定要试一试在路径外加上 requi ...

ECharts圆环图

ECharts圆环图相关推荐

最新文章

热门文章