Echarts环形图使用

1、官网找图

Echarts官网链接

2、使用

首先要进行下载，打开cmd，输入

npm install echarts --save

如果显示报错，那么使用管理员身份运行cmd。

其次，html中建立盒子，存放这个图标，记住一定要为这个盒子设置长宽。

<div class="chart" id="main" :style="{width: '431px', height: '167px'}"></div>

注意：这里的盒子id为main，底下js代码中 var chartDom = document.getElementById(‘main’)，得到的id要和存放的盒子id相对应。

js中按照以下格式进行使用，其中的import根据需求会有不一样之处。


import * as echarts from 'echarts/core';
import {TooltipComponent, LegendComponent} from 'echarts/components';
import {PieChart} from 'echarts/charts';
import {LabelLayout} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';echarts.use([TooltipComponent,LegendComponent,PieChart,CanvasRenderer,LabelLayout
]);export default {// eslint-disable-next-line vue/multi-word-component-namesname: "construction",mounted() {this.createChart();},methods: {createChart() {var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;option = {//此处放入官网复制粘贴的图表代码};option && myChart.setOption(option);}}}

Echars环形图设置

这是我的目标图表

对于环形图的操作，全部存放在option中。
这里展示代码，在代码中标注位置。

   option = {tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} ({d}%)"},color:['#051C38','#15C2D9'],//修改图表颜色//graphic控制环形中间出现字，其中有两个对象，就是两行字graphic: [{type: 'text',//控制内容为文本文字left: 'center',top: '59px',//调整距离盒子高处的位置style: {fill: '#F3DF04',//控制字体颜色text: '30%',//控制第一行字显示内容fontSize: '24px',}}, {type: 'text',left: 'center',top: '90px',z: 10,style: {text: '投资进度',font: 'Microsoft YaHei',fontSize: '14px',lineHeight: 15,fill: '#FFFFFF',}}],series: [{name: 'Access From',type: 'pie',radius: ['60%', '90%'],//在此处控制环的大小，第一个数据为内环，第二个为外环avoidLabelOverlap: false,//在这就是控制提示线文字的代码label: {normal: {show: true,//开启提示线文字position: 'outer',//设置文字的所在的位置formatter: '{c}亿',//设置展示的内容borderWidth: 20,//大小设置borderRadius: 4,color: '#F3DF04',//文字颜色rich: {//设置字体，c代表数据内容，b代表数据名称（这两个都可以在option中的data里面看到）c: {fontSize: 16,lineHeight: 12,}},}},emphasis: {label: {show: false,fontSize: 40,fontWeight: 'bold'}},//设置提示线labelLine: {normal: {show: true,//开启提示线展示length: 30,//设置第一条提示线长度length2: 30,//设置第二条提示线长度lineStyle: {color: 'white'}}},data: [{value: 700, name: '未完成投资'},{value: 300, name: '已完成投资'},]}]};

以上就是全部内容，如果有错误之处，欢迎指正！

Echarts环形图使用和设置（内外大小、颜色、指示线、圆圈中心字展示）相关推荐

修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
echarts折线图拐点样式设置
echarts折线图拐点样式设置代码详情: series: [{name: '发文篇数',type: 'line',// smooth: true,showSymbol: true,symbol: ...
echarts 环形图占比_环形图_仪表盘
Echarts 常用各类图表模板配置注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
echarts折线图各段设置不同颜色
echarts折线图各段设置不同颜色可以通过设置 visualMap 属性,来控制不同线段的颜色: 文档连接: https://echarts.apache.org/zh/option.html#v ...
echarts环形图内部圆，外部圆形以及阴影设置
环形图修改图例自定义icon 完整代码图 Chart1() { // 折算价值户新增构成let chartDom = document.getElementById('main');let myCh ...
Echarts环形图设置空数据样式
需求背景由于最近的需求涉及到图表的展示,所以引入Echarts来渲染图表,但是问题也随之而来了,仔细阅读过文档后发现,Echarts对于环形图并没有能够设置默认样式的地方,对于空数据,界面直接就是空 ...
echarts环形图高亮提示文字位置位于中间_CAD多行文字的格式设置
不同版本的界面不太一样,低版本或用经典界面弹出的是工具栏,高版本的RIBBON界面是命令面板,不同版本功能也略有差异,版本如果过低,功能非常少.这里以2014版为例来给大家介绍,下图是2014版的文字 ...
echarts 环形图中间添加html,echarts配置一个中间显示文字的环形图
先贴一张效果图 1.导包我没有用什么框架,直接引入echarts.min.js文件,代码如下: 注意这样引入不要放在header标签里,会阻塞html渲染,导致报错. 2.给echarts一个盒子 ...
Echarts环形图--自定义图例文本和中心文字
一.设置环形图中心文字可用 titel.text 和 title.subtext 来定义中心处的文本 title:{text:subtext: } 用 graphic 原生图形元素组件每个图形元素 ...

Echarts环形图使用和设置（内外大小、颜色、指示线、圆圈中心字展示）

Echarts环形图使用

1、官网找图

2、使用

Echars环形图设置

Echarts环形图使用和设置（内外大小、颜色、指示线、圆圈中心字展示）相关推荐

最新文章

热门文章