HTML餅狀圖中心添加文字,echarts餅狀圖環形中間動態文字

let currName = "";

let myChart= echarts.getInstanceByDom(document.getElementById(‘chart-panel‘));//console.log(myChart);

myChart.on(‘mouseover‘, (params) =>{

currName=params.name;

console.log(params)

let op=myChart.getOption();

let _label={

normal:{

show:true,

position:‘center‘,

formatter: [

`{a|${params.name}}`,

`{b|${params.percent + "%"}}`

].join(‘\n‘),

rich: {

a: {

color:‘#fff‘,

fontSize:18,

lineHeight:30},

b: {

color:‘blue‘,

fontSize:20,

foneWeight:‘bold‘,

},

}

}

}if(params.seriesIndex === 1){

_label.normal.formatter= [‘zhiliang‘].join(‘\n‘)

}

op.series[0].label =_label;

myChart.setOption(op,true)

})

option={

tooltip: {

trigger:‘item‘,

formatter:‘{a}
{b}: {c} ({d}%)‘},

legend: {

orient:‘vertical‘,

right:10,

top:20,

bottom:20,

data: [‘直接訪問‘, ‘郵件營銷‘, ‘聯盟廣告‘, ‘視頻廣告‘, ‘搜索引擎‘]

},

color : [‘red‘, ‘orange‘, ‘yellow‘, ‘green‘, ‘blue‘, ‘indigo‘, ‘purple‘],

series: [

{

name:‘訪問來源‘,

type:‘pie‘,

radius: [‘50%‘, ‘70%‘],

avoidLabelOverlap:false,

label: {

normal:{

show:true,

position:‘center‘,

formatter: [‘zhiliang‘].join(‘\n‘),

rich: {

a: {

color:‘#fff‘,

fontSize:18,

lineHeight:30},

b: {

color:‘yellow‘,

fontSize:20,

foneWeight:‘bold‘,

textShadowBlur:20,

textShadowColor:‘yellow‘},

}

}

},

labelLine: {

normal: {

show:false}

},

data: [

{value:335, name: ‘直接訪問‘,color:"#cccccc"},

{value:310, name: ‘郵件營銷‘},

{value:234, name: ‘聯盟廣告‘},

{value:135, name: ‘視頻廣告‘},

{value:1548, name: ‘搜索引擎‘}

]

},

{

name:‘邊框1‘,

type:‘pie‘,

hoverAnimation:false,

radius:[‘75%‘, ‘75%‘],

labelLine:{

normal:{

show:false}

},

itemStyle:{

normal:{

borderWidth:1,

borderColor:"#ffffff",

opacity:0}

},

data: [

{

value:100,

tooltip:{

show:false}

}

]

},

]

};

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/534725.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/534725.shtml
英文地址,請注明出處:http://en.pswp.cn/news/534725.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

pos共識機制_OK區塊鏈60講 | 第17集:什么是PoS共識機制

什么是PoS共識機制https://www.zhihu.com/video/1196092110837805056《OK區塊鏈60講》是由OKEx&新浪科技聯合出品的區塊鏈科普動畫視頻,針對區塊鏈零基礎用戶,通過系列文章、科普動畫等形式,從概念、技術、應用等角度,…

html溢出左右滾動,html-選項卡溢出時水平滾動

我在容器中有一個基本表。 該表將包含約25列。 我正在嘗試在表格溢出時添加水平滾動條,現在過得很艱難。現在正在發生的情況是,表格單元格通過自動調整單元格的高度并保持固定的表格寬度來容納單元格的內容。對于我的方法為何無法解決此問題的建議&#…

大疆無人機android登錄閃退,你的DJI APP閃退了嗎?附官方解決方案

原標題:你的DJI APP閃退了嗎?附官方解決方案今天,很多飛友反應,在使用大疆無人機過程中出現DJI APP閃退情況。隨后在大疆社區官方給出了解決方案,如下:關于DJI GO 4 APP閃退解決方案目前關于DJI GO4 APP閃退…

ps導出gif顏色不對_PS基礎知識(1)

視圖平移命令:1,使用工具箱中的抓手工具或著(H)2按住空格鍵,上下左右移動視圖。(常用方法)圖像格式PSD:原始的圖像文件,包含所有的 Photoshop 處理信息,如圖層&#xff0…

html如何設置鼠標選中狀態,怎么用CSS 設置 當鼠標移動到菜單時,該按鈕變色,鼠標點擊后,頁面停留在鼠標滑過時的狀態!!很急!...

用javascript就可以,基本代碼在下面,你自己照著改吧htmlheadmeta http-equivContent-Type contenttext/html;charset gb2312 //headbodyscript typetext/javascriptfunction changeA(){document.getElementById(menuA).style.background#f00;document.g…

python中難的算法_Python算法很難嗎?python神書《算法圖解》PDF電子版分享給你

許多小伙伴后臺私信說,python算法讓自己很頭疼,有沒有可以讓算法像小說一樣有趣的書籍資料呢?看這里吧!小宋為大家找到了這本《算法圖解》的PDF電子版!讓你在學習python的路上變得輕松有趣!內 容 提 要本書…

音樂分享 html,支付寶朋友圈可以分享音樂嘛

打開手機,找到手機里面的支付寶應用點擊進入在進入的支付寶界面里,選擇底下的朋友點擊進入在彈出的朋友界面選擇生活圈選擇生活圈下方的朋友動態進到朋友動態界面,點擊右上角的照相機圖標支付寶 怎么發朋友圈動態?進入支付寶頁面中…

eplan單線原理圖多線原理圖_EPLAN-黑盒-2

3、黑盒的功能定義制作完成的黑盒僅僅圖形化描述了一個變頻器,它實現邏輯上的智能了嗎?雙擊黑盒彈出屬性標簽,它的主標簽還是現實黑盒,如圖,圖形和邏輯還沒匹配。因此,必須為它重新定義功能。EPLAN的功能定…

html圖片熱點新窗口,HTML基礎必看---表單,圖片熱點,網頁劃區和拼接詳解

html表單里面的圖片點擊相應圖片跳轉到本頁其他去在表格里面選了這個 鼠標點擊一下跳轉到相應區塊 代碼要怎么寫,夜影驅動編程小編今天和大家分享大神需要在一張圖片上設置多個能點擊跳轉的鏈接區域時,推薦使用網頁的熱點鏈接。 參考代碼如下&#xff1a…

ios 點擊出現另外一套tabbar_IOS 點擊tabbaritem跳轉到一個新界面,且隱藏tabbar

先自定義一個UITabbarController,用于Storyboard中再在MyTabbarController中實現protocolinterface MyTabbarController : UITabBarController end再實現代理里面的方法implementation MyTabbarController- (BOOL)tabBarController:(UITabBarController *)tabBarCon…

viewpage 去掉左右切換效果_ViewPager實現多頁面切換以及動畫效果

作者寫的非常詳細,在此贊一下。尤其畫圖示意計算。常看代碼不知coder數字的含義,看此博文無此感。我只在此列出流程和需要注意的點。步驟1:導入android-support-v4.jar包兩種方法(升級到adt17 后需要注意的問題)a, 新建libs文件夾…

獲取html內標題,通過html敏捷包獲取標題標簽

我正在嘗試使用htmlagility pack來獲得結果的鏈接和結果我有這個代碼using HtmlAgilityPack;using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.IO;using System.Linq;using System.Net;using …

html視頻播放div,打造自己的html5視頻播放器

推薦這篇文章遇新是直朋能到:前段時間重新少端原碼動近基開創學畫近基開創學畫近基開學習了一下html5的video部分,以前只是停留在標簽的使用上,這一次決定深入了解相關的API,并運用這些API打造一個簡單的視頻播放器。所謂“打造自…

wpf 代碼獲取contextmenu_[C#]?轉:在WPF里面獲取右鍵彈出菜單(ContextMenu)的鼠標點擊源(Owner)控件...

WPF的ContextMenu沒有類似WinForm里面ContextMenu.SourceControl的概念,但是你可以通過ContextMenuService的GetPlacementTarget方法來獲取類似的效果。很多時候,我們會希望在WPF的資源文件里面定義一個通用的右鍵彈出菜單,然后將這個菜單通過…

2021遼寧高考藝考成績查詢系統入口,2019年遼寧省藝考統考成績查詢官方入口

2019年遼寧省普通高等學校招生美術類、音樂舞蹈類專業統考成績已經公布。考生可以通過以下方式查詢美術類、音樂舞蹈類專業統考成績:一、美術類專業統考合格分數線美術類本科專業統考合格分數線為185分,且3門科目中至少有2門各不低于60分;專科專業統考合…

python出現traceback什么意思_python-異常處理 traceback獲取詳細異常

直接來幾個簡單的栗子:try:100/0except Exception as err:print(err)輸出結果:division by zero只知道是報了這個錯,卻不知道在哪個文件哪個函數哪一行報的錯。使用 traceback 模塊importtracebacktry:100/0exceptException as e:traceback.print_exc()輸出結果:Tra…

2020輔警考試計算機知識題,2019年輔警考試公共基礎知識題庫:計算機知識習題(二)...

中公招警考試網為考生提供2019年輔警考試計算機基礎知識題目及答案解析,幫助考生順利備考輔警考試。輔警考試備考周期短、復習范圍大,中公小編建議考生充分利用各個輔警考試題進行練習。1. 如果要查找Glossary.txt, Glossary.doc 和Glossy.doc 三個文件&…

用python程序編寫二元多項式_Python多項式回歸的實現方法

多項式回歸是一種線性回歸形式,其中自變量x和因變量y之間的關系被建模為n次多項式。多項式回歸擬合x的值與y的相應條件均值之間的非線性關系,表示為E(y | x)為什么多項式回歸:研究人員假設的某些關系是曲線的。顯然,這種類型的案例…

微型計算機硬盤為什么要分區,為什么懂電腦的人,都說硬盤不需要分區?看完你就知道了...

你的電腦有多少個分區呢?當你拿到一臺新電腦的時候,一般只能看到一個系統分區。這時候就會開始進行系統分區,將硬盤分為C、D、E等等盤符,用途也各不相同,系統盤,資料盤,娛樂盤等等。似乎所有人都…

字符串固定長度 易語言_易語言字符串操作源碼

易語言字符串操作源碼系統結構:字符串_取長度,字符串_取中間,字符串_取左邊,字符串_取右邊,字符串_替換,到寬字符,到多字節,取文本數據地址,取字節集數據地址,MultiByteToWideChar,WideCharToMultiByte,程序集1| || |------ _啟動子程序| || |------ _臨時子程序| || |程…