Echarts實現(xiàn)點擊列表聯(lián)動餅圖的示例代碼
簡單易懂的Echars案例,實現(xiàn)點擊列表聯(lián)動餅圖
- 安裝 echarts-for-react
- 項目中引入 import ReactECharts from 'echarts-for-react';
- 開始寫案例啦!?。?/li>
效果圖
1. 首先我們先寫一個左側列表 StageLine
利用StageItem 將 data 中的數(shù)據(jù)遍歷并展示。
import React = require('react'); import { StageItem } from './StageItem'; const data = [ { name: '糖', value: '12' }, { name: '蛋白質(zhì)', value: '24' }, { name: '脂肪', value: '15' }, ]; type StageLineProps = { handleClickPie?: (index: number) => void; setCurrentIndex?: (o: number) => void; }; export default function StageLine({ handleClickPie, setCurrentIndex, }: StageLineProps) { return ( <div> {data?.map((item, index) => { return ( <div key={index} onClick={() => { handleClickPie?.(index); setCurrentIndex?.(index); }} > <StageItem title={item.name} value={item.value} /> </div> ); })} </div> ); }
StageLine 子組件 StageItem
import { Group, Text } from '@mantine/core'; import React = require('react'); type StageItemProps = { title: string; value: string }; export function StageItem({ title, value }: StageItemProps) { return ( <Group spacing={2} noWrap align="center" sx={{ cursor: 'pointer', width: 200, display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', justifyContent: 'center', alignItems: 'stretch', alignContent: 'stretch', alignSelf: 'normal', }} > <Text sx={{ backgroundColor: '#004399', padding: '6px 8px', color: 'white', minWidth: 40, maxWidth: 85, lineHeight: '18px', alignItems: 'stretch', display: 'inline-block', flexShrink: 0, }} size={12} weight={600} > {title} </Text> <Text sx={{ backgroundColor: 'rgba(0, 67, 153, 0.06)', padding: '6px 8px', color: '#004399', flexGrow: 1, '.react-katex ': { // height: '26px', }, }} size={12} weight={600} > {value ?? '-'} {/* <div style={{ display: 'inline-block' }}>{unit}</div> */} </Text> </Group> ); }
2.接下來我們寫右側餅圖
我們利用 forwardRef 來接受從父組件傳遞過來的 ref,并將 ref 賦給餅圖組件 ReactECharts。拿到餅圖的ref 我么 就可以實現(xiàn)左右聯(lián)動的效果啦!
import { EChartsInstance } from 'echarts-for-react'; import { log } from 'echarts/types/src/util/log'; import { forwardRef, lazy } from 'react'; import React = require('react'); const ReactECharts = lazy(() => import('echarts-for-react')); const data = [ { name: '糖', value: '12' }, { name: '蛋白質(zhì)', value: '24' }, { name: '脂肪', value: '15' }, ]; export const Pie = forwardRef<EChartsInstance, any>((_, ref) => { // console.log(ref,2) const options = { color: [ '#3F72BE', '#1F3C88', '#2E4FA3', '#6B90D8', '#8DBEEB', '#B6D0F8', '#DAEBFB', '#F0F8FD', ], title: { text: '能量', left: 'center', textStyle: { fontSize: '16px', fontWeight: 700, }, }, tooltip: { trigger: 'item', formatter: ` <br/>vvxyksv9kd% `, showContent: true, alwaysShowContent: false, displayMode: 'single', renderMode: 'auto', confine: null, showDelay: 0, hideDelay: 100, transitionDuration: 0.4, enterable: true, textStyle: { fontSize: 14, color: '#333', }, }, legend: { itemStyle: { borderWidth: 0, }, orient: 'vertical', backgroundColor: 'rgba(0,67,153,0.06)', bottom: 100 - 17 * (data?.length ?? 0), borderRadius: 4, itemWidth: 10, itemHeight: 10, padding: [12, 20], itemGap: 7, icon: 'rect', textStyle: { padding: [0, 0, 0, 4], color: '#111', fontWeight: 400, fontFamily: 'sans-serif', lineHeight: 15, fontSize: 12, }, }, series: [ { itemStyle: { borderWidth: 1, borderRadius: 0, borderColor: '#fff', }, name: '', type: 'pie', radius: '80%', top: -115, label: { show: false, position: 'center', }, data: data, labelLine: { show: false, }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)', }, }, }, ], }; return ( <div> <ReactECharts ref={ref} option={options} style={{ width: 250, height: 400, margin: '25px auto' }} opts={{ renderer: 'svg' }} /> </div> ); });
3. 在最外層父級,寫一些方法,進行聯(lián)動操作。
handleClickPie 方法是當我們點擊左側列表時,對應部分的右邊餅圖高亮顯示,點擊當前項,同時要取消上一次點擊項的高亮。那么此時,我們就要拿到,之前高亮的項的index(prePieRef)和當前的高亮的項的index(currentIndex)。
clickOutsidePieRef:點擊屏幕其他位置時,取消當前高亮
注意??:這個ref必須給餅圖的外層容器,否則不能生效!
import { Box, Group } from '@mantine/core'; import * as React from 'react'; import { useRef, useState } from 'react'; import { Pie } from './Pie'; import StageLine from './StageLine'; import './style.css'; import ReactECharts from 'echarts-for-react'; import { useClickOutside } from '@mantine/hooks'; export default function App() { const pieRef = useRef<ReactECharts>(null); const prePieRef = useRef(-1); const [currentIndex, setCurrentIndex] = useState(-1); const handleClickPie = (index: number) => { if (prePieRef.current >= 0) { pieRef?.current?.getEchartsInstance()?.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: prePieRef.current, }); } pieRef?.current?.getEchartsInstance()?.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index, }); prePieRef.current = index; pieRef?.current?.getEchartsInstance()?.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index, }); }; const clickOutsidePieRef = useClickOutside(() => { const downplay = pieRef?.current?.getEchartsInstance()?.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: currentIndex, }); const hideTip = pieRef?.current?.getEchartsInstance()?.dispatchAction({ type: 'hideTip', }); return { downplay, hideTip }; }); console.log(pieRef) return ( <Group> <StageLine handleClickPie={handleClickPie} setCurrentIndex={setCurrentIndex} /> <Box ref={clickOutsidePieRef}> <Pie ref={pieRef} /> </Box> </Group> ); }
最后附上源碼:https://stackblitz.com/edit/react-ts-reghex?file=App.tsx,Pie.tsx,StageItem.tsx,StageLine.tsx
到此這篇關于Echarts實現(xiàn)點擊列表聯(lián)動餅圖的示例代碼的文章就介紹到這了,更多相關Echarts列表聯(lián)動餅圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
- React項目搭建與Echarts工具使用詳解
- vue+echarts封裝氣泡圖的方法
- echarts 3D地圖為區(qū)域自定義顏色的解決方法
- 在vue中使用echarts實現(xiàn)上浮與下鉆效果
- 使用GetInvalidFileNameCharts生成文件名
- 解決echarts中餅圖標簽重疊的問題
- echarts餅圖扇區(qū)添加點擊事件的實例
- echarts餅圖指示器文字顏色設置不同實例詳解
- echarts餅圖各個板塊之間的空隙如何實現(xiàn)
- echarts實現(xiàn)餅圖與樣式設置
- echarts餅圖標簽formatter使用及餅圖自定義標簽
- 基于Echarts實現(xiàn)餅圖效果
- Vue ECharts餅圖實現(xiàn)方法詳解
相關文章
Js和JQuery獲取鼠標指針坐標的實現(xiàn)代碼分享
這篇文章主要介紹了Js和JQuery獲取鼠標指針坐標的實現(xiàn)代碼分享,本文直接給出實現(xiàn)的代碼,需要的朋友可以參考下2015-05-05Chart.js 輕量級HTML5圖表繪制工具庫(知識整理)
這篇文章主要介紹了Chart.js 輕量級HTML5圖表繪制工具庫,Chart.js基于HTML5 canvas技術支持所有現(xiàn)代瀏覽器,并且針對IE7/8提供了降級替代方案,感興趣的小伙伴們可以參考一下2018-05-05javascript實現(xiàn)移動端 HTML5 圖片上傳預覽和壓縮功能示例
這篇文章主要介紹了javascript實現(xiàn)移動端 HTML5 圖片上傳預覽和壓縮功能,結合實例形式分析了javascript移動端 HTML5 圖片上傳預覽和壓縮功能具體實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-05-05JavaScript 提升運行速度之循環(huán)篇 譯文
根據(jù)Nicholas 的說法,有四種代碼 會拖慢腳本的運行,并最終導致腳本失控。分別是次數(shù)過多的同步循環(huán)、龐大的函數(shù)體、不恰當?shù)倪f歸和不合理的DOM 調(diào)用。2009-08-08