代碼
提交代碼
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
<div id="dataview">hello world</div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script crossorigin src="//unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="//unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script type="text/javascript">
const myChart = echarts.init(document.getElementById('main'));
// 使用react組件形式編寫的數據視圖
function DataView(props) {
const rows = props.series;
return React.createElement(
'table',
{
className: 'table',
},
rows.map(function (row) {
return React.createElement(
'tr',
null,
React.createElement('td', null, row.name),
row.value.map(function (cell) {
return React.createElement('td', null, cell);
})
);
})
);
}
const option = {
toolbox: {
feature: {
dataView: {
optionToContent(opt) {
const {
series: [{ data }],
} = opt;
// 動態創建一個容器節點
const root = document.createElement('div');
// 需要先將react組件渲染到容器節點上
ReactDOM.render(React.createElement(DataView, { series: data }), root);
return root;
},
},
},
},
radar: {
indicator: [
{ name: '銷售', max: 6500 },
{ name: '管理', max: 16000 },
{ name: '信息技術', max: 30000 },
{ name: '客服', max: 38000 },
{ name: '研發', max: 52000 },
{ name: '市場', max: 25000 },
],
},
series: [
{
type: 'radar',
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '預算',
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '實際開銷',
},
],
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
運行結果