代码实现如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> </head> <body> <div id="scatter" style="widows:600px;height:400px"></div> <script> var scattr_chart = echarts.init(document.getElementById("scatter")); var scattr_option = { //背景色渐变 backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{ offset: 0.3, color: '#f7f8fa' }, { offset: 1, color: '#cdd0d5' }]), //标题 title: { text: "散点图" }, tooltip: { trigger: "axis" }, yAxis: {}, xAxis: {}, series: [{ type: 'effectScatter', symbolSize: 20, data: [ [7.7, 9.2], [6.4,8.5] ] }, { symbolSize: 20, data: [ [10.0, 8.04], [8.0, 6.95], [13.0, 7.58], [9.0, 8.81], [11.0, 8.33], [14.0, 9.96], [6.0, 7.24], [4.0, 4.26], [12.0, 10.84], [7.0, 4.82], [5.0, 5.68] ], type: 'scatter' }] } scattr_chart.setOption(scattr_option); </script> </body> </html>绘图效果如下
代码实现如下 注意：代码依赖并引用了china.js文件 可以到我的百度云下载该文件：https://pan.baidu.com/s/1qPovxvPcJiC7SduTWSuRxw 提取码：ptab
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小坨的地图</title> <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> <script src="js/china.js"></script> </head> <body> <div id="map" style="width: 600px;height: 400px;"></div> <script type="text/javascript"> var map_chart = echarts.init(document.getElementById('map')); var data_area = [ { name: "北京", value: 100, }, { name: "上海", value: 200, }, { name: "广东", value: 300, } ] var map_option = { title:{ text:"中国地图" }, //提示工具 tooltip: { //数据项图形触发 trigger: 'item', formatter: "数量 <br> {b}: {c}" }, visualMap: { seriesIndex: 0, min: 0, max: 300, left: 'left', top: 'bottom', text: ['高', '低'],// 文本，默认为数值文本 calculable: true //手柄是否能被拖拽 }, //网格离容器的位置 grid: { height: 200, width: 8, right: 80, bottom: 10 }, geo: { map: 'china', //设定地图的长宽比 aspectScale: 0.75, //地图组件离容器的位置 top: 5, bottom: 15, label: { normal: { show: true, }, emphasis: { show: true, } }, roam: false, }, series: [ { zlevel: 1, name: 'china', type: 'map', mapType: 'china', selectedMode: 'multiple', roam: true, left: 0, right: '15%', geoIndex: 0, aspectScale: 0.75, //地图长宽比 label: { normal: { show: true, }, emphasis: { show: true, } }, data: data_area } ] }; map_chart.setOption(map_option); </script> </body> </html>绘图效果如下
代码实现如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小坨的雷达图</title> <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> </head> <body> <div id="radar" style="width: 600px;height:400px;"></div> <script> var radar_chart = echarts.init(document.getElementById('radar')); var radar_option = option = { title: { text: '基础雷达图' }, tooltip: {}, legend: { data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'] }, radar: { //六个顶点旁边的小边框 name: { textStyle: { color: '#fff', backgroundColor: '#999', borderRadius: 3, padding: [3, 5] } }, indicator: [ { name: '销售（sales）', max: 6500 }, { name: '管理（Administration）', max: 16000 }, { name: '信息技术（Information Techology）', max: 30000 }, { name: '客服（Customer Support）', max: 38000 }, { name: '研发（Development）', max: 52000 }, { name: '市场（Marketing）', max: 25000 } ] }, series: [{ name: '预算 vs 开销（Budget vs spending）', type: 'radar', // areaStyle: {normal: {}}, data: [ { value: [4300, 10000, 28000, 35000, 50000, 19000], name: '预算分配（Allocated Budget）' }, { value: [5000, 14000, 28000, 31000, 42000, 21000], name: '实际开销（Actual Spending）' } ] }] }; radar_chart.setOption(radar_option); </script> </body> </html>绘图效果如下
代码实现如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>关系图</title> <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> </head> <body> <div id="graph" style="width: 600px; height: 400px;"></div> <script> var graph_chart = echarts.init(document.getElementById('graph')); var graph_option = option = { title: { text: '关系图' }, tooltip: {}, //数据更新动画的时长 animationDurationUpdate: 1500, //数据更新动画的缓动效果 animationEasingUpdate: 'quinticInOut', series: [ { type: 'graph', layout: 'none', symbolSize: 50, //开启鼠标缩放和平移漫游 roam: true, label: { show: true }, //边两端的标记类型 edgeSymbol: ['circle', 'arrow'], //边两端的标记大小 edgeSymbolSize: [4, 10], //边对应的文本标签 edgeLabel: { fontSize: 20 }, data: [{ name: '节点1', x: 300, y: 300 }, { name: '节点2', x: 800, y: 300 }, { name: '节点3', x: 550, y: 100 }, { name: '节点4', x: 550, y: 500 }], // links: [], links: [{ source: 0, target: 1, symbolSize: [5, 20], label: { show: true }, lineStyle: { width: 5, //边的曲度，值越大边的曲度越大 curveness: 0.2 } }, { source: '节点2', target: '节点1', label: { show: true }, lineStyle: { curveness: 0.2 } }, { source: '节点1', target: '节点3' }, { source: '节点2', target: '节点3' }, { source: '节点2', target: '节点4' }, { source: '节点1', target: '节点4' }], lineStyle: { opacity: 0.9, width: 2, curveness: 0 } } ] }; graph_chart.setOption(graph_option); </script> </body> </html>绘图效果如下
代码实现如下 注意：代码依赖并引用了echarts-wordcloud-min.js文件 该文件官方下载地址：https://github.com/ecomfe/echarts-wordcloud 私人下载地址：https://download.csdn.net/download/atuo200/12576510
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小坨的词云图</title> <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> <script src="js/echarts-wordcloud.min.js"></script> </head> <body> <div id="wordcloud" style="width: 600px; height: 400px;"></div> <script> var wordcloud_chart = echarts.init(document.getElementById('wordcloud')); var wordcloud_option = { //数据项触发工具，保持默认配置 tooltip: {}, series: [ { type: 'wordCloud', gridSize: 2, //字体大小范围 sizeRange: [12, 50], //字体旋转角度范围 rotationRange: [-90, 90], //词云图形状 shape: 'pentagon', //词云图长宽 width: 600, height: 400, drawOutOfBound: true, textStyle: { //字体随机颜色 normal: { color: function () { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')'; } }, emphasis: { //阴影距离 shadowBlur: 10, //阴影颜色 shadowColor: '#333' } }, data: [ { name: 'Sam S Club', value: 10000, textStyle: { normal: { color: 'black' }, emphasis: { color: 'red' } } }, { name: 'Macys', value: 6181 }, { name: 'Amy Schumer', value: 4386 }, { name: 'Jurassic World', value: 4055 }, { name: 'Charter Communications', value: 2467 }, { name: 'Chick Fil A', value: 2244 }, { name: 'Planet Fitness', value: 1898 }, { name: 'Pitch Perfect', value: 1484 }, { name: 'Express', value: 1112 }, { name: 'Home', value: 965 }, { name: 'Johnny Depp', value: 847 }, { name: 'Lena Dunham', value: 582 }, { name: 'Lewis Hamilton', value: 555 }, { name: 'KXAN', value: 550 }, { name: 'Mary Ellen Mark', value: 462 }, { name: 'Farrah Abraham', value: 366 }, { name: 'Rita Ora', value: 360 }, { name: 'Serena Williams', value: 282 }, { name: 'NCAA baseball tournament', value: 273 }, { name: 'Point Break', value: 265 } ] } ] }; wordcloud_chart.setOption(wordcloud_option); </script> </body> </html>绘图效果如下
代码实现如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> </head> <body> <div id="tree" style="width: 600px; height: 400px;"></div> <script> var data = {"name":"flare","children":[{"name":"analytics","children":[{"name":"cluster","children":[{"name":"AgglomerativeCluster","value":3938},{"name":"CommunityStructure","value":3812},{"name":"HierarchicalCluster","value":6714},{"name":"MergeEdge","value":743}]},{"name":"graph","children":[{"name":"BetweennessCentrality","value":3534},{"name":"LinkDistance","value":5731},{"name":"MaxFlowMinCut","value":7840},{"name":"ShortestPaths","value":5914},{"name":"SpanningTree","value":3416}]},{"name":"optimization","children":[{"name":"AspectRatioBanker","value":7074}]}],"collapsed":true},{"name":"animate","children":[{"name":"Easing","value":17010},{"name":"FunctionSequence","value":5842},{"name":"interpolate","children":[{"name":"ArrayInterpolator","value":1983},{"name":"ColorInterpolator","value":2047},{"name":"DateInterpolator","value":1375},{"name":"Interpolator","value":8746},{"name":"MatrixInterpolator","value":2202},{"name":"NumberInterpolator","value":1382},{"name":"ObjectInterpolator","value":1629},{"name":"PointInterpolator","value":1675},{"name":"RectangleInterpolator","value":2042}]},{"name":"ISchedulable","value":1041},{"name":"Parallel","value":5176},{"name":"Pause","value":449},{"name":"Scheduler","value":5593},{"name":"Sequence","value":5534},{"name":"Transition","value":9201},{"name":"Transitioner","value":19975},{"name":"TransitionEvent","value":1116},{"name":"Tween","value":6006}]}]}; var tree_chart = echarts.init(document.getElementById('tree')); var tree_option = { tooltip: { trigger: 'item', triggerOn: 'mousemove' }, series: [ { type: 'tree', data: [data], //树图组件离容器的位置 top: '1%', left: '15%', bottom: '1%', right: '7%', symbolSize: 10, //树图的布局:中从左到右 orient: 'LR', //label描述了每个节点所对应的文本标签的样式 label: { position: 'right', //文本标签块文字垂直对齐方向 verticalAlign: 'middle', //文本标签块文字水平对齐方向 align: 'left' }, //叶子节点的特殊配置 leaves: { //叶子节点对应的文本标签的特殊配置 label: { position: 'left', verticalAlign: 'middle', align: 'right' } }, //子树折叠和展开的交互，打开 expandAndCollapse: true, animationDuration: 550, //初始动画的时长 animationDurationUpdate: 750 //数据更新动画的时长 } ] } tree_chart.setOption(tree_option); </script> </body> </html>绘图效果如下
