|
|
@@ -0,0 +1,281 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN" style="height: 100%">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>chart</title>
|
|
|
+</head>
|
|
|
+
|
|
|
+<style>
|
|
|
+ *{
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ body {
|
|
|
+ background-color: #04060a;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<body style="height: 100%; margin: 0">
|
|
|
+ <div id="container" style="height: 100%"></div>
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
|
+ <script type="text/javascript" src="https://cdn.staticfile.org/echarts/5.4.2/echarts.min.js"></script>
|
|
|
+ <script type="text/javascript">
|
|
|
+ const testData = [
|
|
|
+ {
|
|
|
+ name: '开埠通商',
|
|
|
+ desc: '开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述',
|
|
|
+ corps: [
|
|
|
+ {
|
|
|
+ name: '李鸿章',
|
|
|
+ brand: '创办江南制造局、上海机器织布局。',
|
|
|
+ desc: '',
|
|
|
+ story: '江南制造总局：中国民族工业从此起步；上海机器织布局：开创中国近代纺织业之先河。',
|
|
|
+ importance: 30,
|
|
|
+ id: '1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '徐寿',
|
|
|
+ brand: '上海江南制造总局',
|
|
|
+ desc: '清代著名科学家，上海江南制造总局襄办。',
|
|
|
+ story: '',
|
|
|
+ importance: 40,
|
|
|
+ id: '2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '刘永康',
|
|
|
+ brand: '正泰橡皮物品制造厂',
|
|
|
+ desc: '创办正泰橡皮物品制造厂，首创“回力”商标。',
|
|
|
+ story: '',
|
|
|
+ importance: 50,
|
|
|
+ id: '3'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '曲折发展',
|
|
|
+ desc: '曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述',
|
|
|
+ corps: [
|
|
|
+ {
|
|
|
+ name: '黄佐卿',
|
|
|
+ brand: '裕晋纱厂',
|
|
|
+ desc: '1895年投资的裕晋纱厂在上海杨树浦路落成并开工投产',
|
|
|
+ story: '',
|
|
|
+ importance: 30,
|
|
|
+ id: '1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '孙多森、孙多鑫',
|
|
|
+ brand: '阜丰面粉厂',
|
|
|
+ desc: '1900年集资创办上海第一家民族机器面粉厂“阜丰面粉厂”',
|
|
|
+ story: '孙氏通、孚、丰集团：官办企业转化为民族资本企业的典型。',
|
|
|
+ importance: 30,
|
|
|
+ id: '2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '严裕棠',
|
|
|
+ brand: '大隆机器厂',
|
|
|
+ desc: '1902年开办的大隆机器厂',
|
|
|
+ story: '',
|
|
|
+ importance: 30,
|
|
|
+ id: '3'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '张士德、刘致祥',
|
|
|
+ brand: '中国精益眼镜公司',
|
|
|
+ desc: '1911年集资开设中国精益眼镜公司',
|
|
|
+ story: '',
|
|
|
+ importance: 30,
|
|
|
+ id: '4'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '荣宗敬、荣德生',
|
|
|
+ brand: '第一家面粉厂、申新纺织公司',
|
|
|
+ desc: '第一家面粉厂，1915年，荣氏兄弟又创建申新纺织公司，人称“棉纱大王”。1919年至1921年，又发起和参与了上海华商面粉交易所、纱布交易所，成为上海民族工业的重要台柱之一。',
|
|
|
+ story: '荣氏企业：上海民族工业的重要台柱之一。',
|
|
|
+ importance: 30,
|
|
|
+ id: '5'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+ function randomColor() {
|
|
|
+ return '#' + Math.floor(
|
|
|
+ (
|
|
|
+ Math.random() * (1 - 0.3) + 0.3
|
|
|
+ ) * 0xffffff
|
|
|
+ ).toString(16)
|
|
|
+ }
|
|
|
+
|
|
|
+ const dataForRender = {}
|
|
|
+
|
|
|
+ let myChart = null
|
|
|
+
|
|
|
+ var dom = document.getElementById('container');
|
|
|
+ myChart = echarts.init(dom, null, {
|
|
|
+ renderer: 'canvas',
|
|
|
+ useDirtyRect: false
|
|
|
+ });
|
|
|
+
|
|
|
+ function showChart(timeIdx) {
|
|
|
+ myChart.clear()
|
|
|
+
|
|
|
+ dataForRender.nodes = [
|
|
|
+ {
|
|
|
+ name: testData[timeIdx].name,
|
|
|
+ id: '0',
|
|
|
+ symbolSize: 100,
|
|
|
+ itemStyle: {
|
|
|
+ color: randomColor()
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ dataForRender.edges = []
|
|
|
+
|
|
|
+ for (const iterator of testData[timeIdx].corps) {
|
|
|
+ const newNode = {
|
|
|
+ name: iterator.brand,
|
|
|
+ id: iterator.id,
|
|
|
+ symbolSize: iterator.importance,
|
|
|
+ itemStyle: {
|
|
|
+ color: randomColor()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ dataForRender.nodes.push(newNode)
|
|
|
+ }
|
|
|
+ // 除了代表时代的那个节点，其他节点的尺寸归一化到[10, 70]
|
|
|
+ let vMax = Number.NEGATIVE_INFINITY
|
|
|
+ let vMin = Number.POSITIVE_INFINITY
|
|
|
+ const vMaxNew = 50
|
|
|
+ const vMinNew = 30
|
|
|
+ for (let index = 1; index < dataForRender.nodes.length; index++) {
|
|
|
+ const size = dataForRender.nodes[index].symbolSize
|
|
|
+ if (size > vMax) {
|
|
|
+ vMax = size
|
|
|
+ }
|
|
|
+ if (size < vMin) {
|
|
|
+ vMin = size
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let scale = null
|
|
|
+ if (vMax === vMin) {
|
|
|
+ scale = 1
|
|
|
+ for (const iterator of dataForRender.nodes.slice(1)) {
|
|
|
+ iterator.symbolSize = vMinNew + (vMaxNew - vMinNew) / 2
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ scale = (vMaxNew - vMinNew) / (vMax - vMin)
|
|
|
+ for (const iterator of dataForRender.nodes.slice(1)) {
|
|
|
+ iterator.symbolSize = vMinNew + (iterator.symbolSize - vMin) * scale
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log(dataForRender.nodes);
|
|
|
+ for (let i = 0; i < dataForRender.nodes.length; i++) {
|
|
|
+ for (let j = i + 1; j < dataForRender.nodes.length; j++) {
|
|
|
+ const hasCenterNode = (i === 0 || j === 0)
|
|
|
+ const newEdge = {
|
|
|
+ source: dataForRender.nodes[i].id,
|
|
|
+ target: dataForRender.nodes[j].id,
|
|
|
+ value: dataForRender.nodes[i].symbolSize * dataForRender.nodes[j].symbolSize * (hasCenterNode ? 10 : 1), // 值越大，连接的两个节点间斥力越小。
|
|
|
+ }
|
|
|
+ dataForRender.edges.push(newEdge)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log(dataForRender);
|
|
|
+
|
|
|
+ myChart.setOption({
|
|
|
+ animationDurationUpdate: 1500,
|
|
|
+ animationEasingUpdate: 'quinticInOut',
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'graph',
|
|
|
+ layout: 'force',
|
|
|
+ draggable: false,
|
|
|
+ // 力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力
|
|
|
+ force: {
|
|
|
+ initLayout: 'circular', // 进行力引导布局前的初始化布局，初始化布局会影响到力引导的效果。默认不进行任何布局，使用节点中提供的 x， y 作为节点的位置。如果不存在的话会随机生成一个位置。也可以选择使用环形布局 'circular'。
|
|
|
+ repulsion: 100, // 节点之间的斥力因子。傻逼文档把edgeLength当数组用的用法写到这上边了。
|
|
|
+ gravity: 0.1, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
|
|
|
+ edgeLength: [50, 400], // 把各个边的两个节点之间的距离归一化到这个范围内。与repulsion共同作用。
|
|
|
+ layoutAnimation: true,
|
|
|
+ friction: 0.1, // 这个参数能减缓节点的移动速度。取值范围 0 到 1。但是仍然是个试验性的参数，参见 #11024。
|
|
|
+ },
|
|
|
+ data: dataForRender.nodes,
|
|
|
+ // 或者叫edges
|
|
|
+ links: dataForRender.edges,
|
|
|
+ selectedMode: 'single',
|
|
|
+ select: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 50,
|
|
|
+ shadowColor: 'rgba(255, 255, 125, 0.7)',
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ position: 'right',
|
|
|
+ show: true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 高亮状态的图形样式
|
|
|
+ emphasis: {
|
|
|
+ scale: false,
|
|
|
+ label: {
|
|
|
+ position: 'right',
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 图表是否可以移动、缩放
|
|
|
+ roam: true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 0.5,
|
|
|
+ curveness: 0.3,
|
|
|
+ opacity: 0.7,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, true)
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ // 等myChart上注册了select回调后再执行
|
|
|
+ // 一开始自动选中0号节点，也就是表示时代的那个
|
|
|
+ myChart.dispatchAction({
|
|
|
+ type: 'select',
|
|
|
+ seriesIndex: 0,
|
|
|
+ name: testData[timeIdx].name,
|
|
|
+ })
|
|
|
+ }, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ showChart(0)
|
|
|
+
|
|
|
+ // 用户选中节点后，向父窗口post message
|
|
|
+ function onSelect(params) {
|
|
|
+ if (params.dataType === 'node') { // 用户选中节点触发的
|
|
|
+ if (window.vuplex) {
|
|
|
+ window.vuplex.postMessage({ type: 'select-id', message: dataForRender.nodes[params.dataIndexInside].id });
|
|
|
+ } else {
|
|
|
+ console.error('不存在window.vuplex!');
|
|
|
+ }
|
|
|
+ } else if (params.type === 'select') { // 程序里调用dispatchAction触发的，且type为select
|
|
|
+ if (window.vuplex) {
|
|
|
+ window.vuplex.postMessage({ type: 'select-id', message: '0' });
|
|
|
+ } else {
|
|
|
+ console.error('不存在window.vuplex!');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ myChart.on('select', onSelect)
|
|
|
+
|
|
|
+ window.addEventListener('resize', myChart.resize);
|
|
|
+
|
|
|
+ // 切换时代
|
|
|
+ window.changeTime = function (idx) {
|
|
|
+ if (Number.isInteger(idx) && idx >= 0) {
|
|
|
+ showChart(idx)
|
|
|
+ } else {
|
|
|
+ console.error('[page using echart] changeTime: invalid param!', idx);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
任一存
