echarts通用环形图

效果如下:

<div class="chart-box"><div ref="pieChart" id="pieChart" class="pieChart"style="height: 100%; width: 100%"></div>
</div>

getData() {const myChart = echarts.init(this.$refs.pieChart);const option = {title: {show: true,text: "测试项目名称", // \n可以换行x: "49%", // centery: "center",textAlign: "center",textStyle: {fontSize: "16",fontStyle: "normal",fontWeight: "600",lineHeight: "28",color: "#fff",},},// 带子标题// title: {//     show: true,//    text: "测试项目名称",//    subtext: "测试子标题",//     textStyle: {//      fontSize: 20,//       color: "#ffffff",//      fontWeight: 400,//    },//     subtextStyle: {//      fontSize: 12,//       color: "#ffffff",//       fontWeight: 500,//      },//     textAlign: "center", //图例文字居中显示//     x: "48%", //距离左边的距离//    y: "37%", //距离上边的距离//   },tooltip: {trigger: "item",formatter: "{b} :  {d}%",},color: ["#199BB7", "#01CD9E", "#DE8055", "#C9C83A"],series: [{type: "pie",radius: ["50%", "70%"],label: {normal: {show: true,color: "#BAE9FF",},emphasis: {show: true,},},labelLine: {normal: {show: true,length: 20,length2: 20,},},tooltip: {formatter(params) {return (params.name +"  " +params.value +"  " +params.percent +"%");},},data: [{ value: 22, name: "名称1" },{ value: 3, name: "名称2" },{ value: 4, name: "名称3" },{ value: 5, name: "名称4" },],},],};myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});},

echarts通用环形图相关推荐

【ECharts】环形图、饼状图
目录 color设置的颜色环形渐变色圆环中间显示文字悬浮显示中间文字悬浮显示中间文字,默认显示第一个循环高亮饼图块 label文字过长重叠 label和饼图一致 label展示位置内容为0 ...
echarts之环形图
echarts中环形图就是饼图,区别在于是否定义了图形内部镂空的半径而已,就像下图: 那么现在有了一个圆环,中间如果空着的话就太难看了,所以给了如下的样式: 就是要给圆环中心添加内容.如果是单纯的添加 ...
ECharts 之环形图
上一篇文章写了堆叠柱状图的用法,本文写的是环形图的方法,环形图是饼图的一种,具体的饼图可以自己更改radius属性的大小 radius : ['50%', '70%'], //饼图的半径,第一项是内半 ...
Echarts实现环形图的渐变颜色效果
已经封装好的环形图组件直接在要用的vue文件中引用: <circleChart:id="chart4.id":width="chart4.width": ...
echarts 圆角环形图
下定决心,好好过一天 ~ var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); v ...
Echarts饼图,环形图,鼠标触碰后取消默认放大效果
项目场景: 项目场景:使用ecahrts 做一个环形图,但是鼠标触碰图例会有放大效果,根据高保真这个效果需要取消问题描述问题1我想把这个放大效果取消,让后翻阅echarts的文档让后发现 let ...
ECharts - 嵌套环形图
嵌套环形图链接:https://pan.baidu.com/s/1bV1IXEoSJT7vTKQcwwoVQg 提取码:hxdl
echarts 饼图/环形图鼠标经过显示文本标签图例icon
文章目录鼠标经过显示文本标签效果关键部分图例 icon 效果关键部分完整实现鼠标经过显示文本标签效果关键部分 label: { // 饼图图形上的文本标签normal: { // ...
echarts 嵌套环形图
下定决心,好好过一天 ~ var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); v ...

echarts通用环形图

echarts通用环形图

echarts通用环形图相关推荐

最新文章

热门文章