Echarts

您所在的位置：网站首页 › echarts折线图tooltip › Echarts

Echarts

2023-04-29 23:11| 来源: 网络整理| 查看: 265

Echarts

本文将采用以下示例：

基本柱形图：Examples - Apache ECharts

坐标轴刻度与标签对齐：Examples - Apache ECharts

条形图：Examples - Apache ECharts

南丁格尔玫瑰图：Examples - Apache ECharts

折线图：Examples - Apache ECharts

旭日图：Examples - Apache ECharts

桑吉图：Examples - Apache ECharts

选取模板

选取官方示例中的基础柱状图作为示例，链接如下：Examples - Apache ECharts

选择完整代码，除去第一行粘贴入框架中option部分。

数据准备学院男女物电 140 60 数科 80 50 经管 100 130 环境 90 80 生科 80 85 音乐 30 50 体育 80 40 文学 60 40 法学 100 120

首先，把数据粘贴到Echarts官方给出的“表格工具”中，链接如下：Spreadsheet Tool - Apache ECharts。

删除第一行数据。

在右侧选项栏中可以对数据格式进行调整，调节数据格式与官方示例中的数据格式一致即可。

把数据粘贴到代码对应位置。

在浏览器中打开即可。

坐标轴刻度与标签对齐

打开示例：Examples - Apache ECharts。

找到对应代码：

123axisTick: { alignWithLabel: true }

代码注释：

tooltip：设置提示框

设置提示框 123tooltip: { trigger: 'axis'}, 降序排列

打开示例：Examples - Apache ECharts。

由于数据格式改变，我们重新转换格式，方法同上，选择“每两列转换成一个二维数组”。

再加上上面的语句。

条形图

把xaxis和yaxis名字换一下就行。

极坐标

打开示例：Examples - Apache ECharts。

在表格工具中选择“每一列转换为一个一维数组”

直接修改data中的数据即可。

南丁格尔玫瑰图

官方示例：Examples - Apache ECharts

这里可以直接修改数据。

123456789[ { value: 4400, name: '亚洲' , itemStyle: {color: '#DF2F2F'}}, { value: 3000, name: '非洲' , itemStyle: {color: '#DB6D23'}}, { value: 2400, name: '北美洲' , itemStyle: {color: '#F3A502'}}, { value: 1800, name: '南美洲' , itemStyle: {color: '#6AA006'}}, { value: 1400, name: '南极洲' , itemStyle: {color: '#14539A'}}, { value: 1000, name: '欧洲' , itemStyle: {color: '#87409C'}}, { value: 900, name: '大洋洲' , itemStyle: {color: '#7F3912'}}]

修改颜色：

123data: [ { value: 40, name: 'rose 1' , itemStyle: {color: '#516b91'}} ]

缺点：数据处理不太方便，除非掌握js语言，建议外部处理好数据后在这里画图比较方便。

气泡图

emphasis.focus：series（高亮当前序列），self（高亮当前值）

旭日图 123456789101112131415161718192021222324252627282930313233343536373839var data = [{ 'name': '化学化工学院', 'children': [{ 'name': '化学', 'value': 11 }, { 'name': '应用化学', 'value': 7 }, { 'name': '材料化学', 'value': 6 }, { 'name': '化学类', 'value': 2 }] }, { 'name': '物理电子工程学院', 'children': [{ 'name': '电子信息科学与技术', 'value': 8 }, { 'name': '物理学(国家基地)', 'value': 5 }, { 'name': '光电信息科学与工程', 'value': 4 }] }, { 'name': '初民学院', 'children': [{ 'name': '大数据金融试验班', 'value': 2 }, { 'name': '生化试验班', 'value': 2 }, { 'name': '金融学', 'value': 1 }, { 'name': '生物科学', 'value': 1 }] }, { 'name': '数学科学学院', 'children': [{ 'name': '数学类', 'value': 5 }, { 'name': '数学与应用数学', 'value': 1 }] }, { 'name': '音乐学院', 'children': [{ 'name': '舞蹈编导', 'value': 4 }, { 'name': '音乐表演', 'value': 1 }] }, { 'name': '计算机与信息技术学院', 'children': [{ 'name': '数据科学与大数据技术', 'value': 3 }] }, { 'name': '生命科学学院', 'children': [{ 'name': '生物科学类', 'value': 2 }] }, { 'name': '体育学院', 'children': [{ 'name': '运动训练', 'value': 2 }] }, { 'name': '历史文化学院', 'children': [{ 'name': '考古学', 'value': 1 }] }, { 'name': '美术学院', 'children': [{ 'name': '环境设计', 'value': 1 }] }, { 'name': '文学院', 'children': [{ 'name': '汉语言文学', 'value': 1 }] }, { 'name': '哲学社会学学院', 'children': [{ 'name': '哲学类', 'value': 1 }] }]option = { title: { text: '山西大学学院专业分布图', subtext: '来源：山西大学', }, tooltip: {}, series: { type: 'sunburst', data: data, radius: [0, '95%'], sort: 'desc', emphasis: { focus: 'descendant' }, levels: [ {}, { r0: '15%', r: '50%', itemStyle: { borderWidth: 2 }, label: { fontSize: 10, rotate: 'radial' } }, { r0: '50%', r: '95%', label: { align: 'right' } } ] }}; 桑吉图 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283var nodes = [ { 'name': '建筑电气与智能化', 'itemStyle': { 'color': '#FFFFD9' } }, { 'name': '能源与动力工程', 'itemStyle': { 'color': '#F4FBC2' } }, { 'name': '环境科学与工程类', 'itemStyle': { 'color': '#D1EDB3' } }, { 'name': '建筑环境与能源应用工程', 'itemStyle': { 'color': '#E7F5B1' } }, { 'name': '机械电子工程', 'itemStyle': { 'color': '#D1EDB3' } }, { 'name': '生物科学类', 'itemStyle': { 'color': '#89D1BA' } }, { 'name': '工商管理类', 'itemStyle': { 'color': '#41B6C4' } }, { 'name': '化学类', 'itemStyle': { 'color': '#64C3BE' } }, { 'name': '电气工程及其自动化', 'itemStyle': { 'color': '#2CA0C1' }, 'label': { 'color': 'white' } }, { 'name': '计算机科学与技术', 'itemStyle': { 'color': '#206CAE' }, 'label': { 'color': 'white' } }, { 'name': '电子信息工程', 'itemStyle': { 'color': '#1D89BC' }, 'label': { 'color': 'white' } }, { 'name': '数据科学与大数据技术', 'itemStyle': { 'color': '#2252A2' }, 'label': { 'color': 'white' } }, { 'name': '经济学类', 'itemStyle': { 'color': '#243A96' }, 'label': { 'color': 'white' } }, { 'name': '成绩优秀', 'itemStyle': { 'color': '#182A7A' }, 'label': { 'color': 'white' } }, { 'name': '其他情况', 'itemStyle': { 'color': '#081D58' }, 'label': { 'color': 'white' } },]var links = [ { 'source': '生物科学类', 'target': '计算机科学与技术', 'value': 5 }, { 'source': '能源与动力工程', 'target': '电子信息工程', 'value': 3 }, { 'source': '能源与动力工程', 'target': '电气工程及其自动化', 'value': 6 }, { 'source': '建筑环境与能源应用工程', 'target': '电子信息工程', 'value': 3 }, { 'source': '建筑环境与能源应用工程', 'target': '电气工程及其自动化', 'value': 3 }, { 'source': '建筑电气与智能化', 'target': '电气工程及其自动化', 'value': 24 }, { 'source': '机械电子工程', 'target': '电气工程及其自动化', 'value': 5 }, { 'source': '环境科学与工程类', 'target': '数据科学与大数据技术', 'value': 3 }, { 'source': '环境科学与工程类', 'target': '计算机科学与技术', 'value': 2 }, { 'source': '化学类', 'target': '计算机科学与技术', 'value': 3 }, { 'source': '工商管理类', 'target': '经济学类', 'value': 3 }, { 'source': '计算机科学与技术', 'target': '成绩优秀', 'value': 10 }, { 'source': '电子信息工程', 'target': '成绩优秀', 'value': 6 }, { 'source': '电气工程及其自动化', 'target': '成绩优秀', 'value': 34 }, { 'source': '电气工程及其自动化', 'target': '其他情况', 'value': 4 }, { 'source': '数据科学与大数据技术', 'target': '成绩优秀', 'value': 3 }, { 'source': '经济学类', 'target': '成绩优秀', 'value': 3 }]option = { title: { text: '山西大学转专业示意图' }, tooltip: { trigger: 'item', triggerOn: 'mousemove' }, series: [ { type: 'sankey', data: nodes, links: links, emphasis: { focus: 'adjacency' }, nodeWidth: 145, nodeGap: 0, top: '8%', right: '5%', label: { position: 'inside' }, levels: [ { depth: 0, lineStyle: { color: 'source', opacity: 0.6 } }, { depth: 1, lineStyle: { color: 'source', opacity: 0.6 } } ], lineStyle: { curveness: 0.5 } } ]} 北京AQI 12345xAxis: { data: data.map(function (item) { return item[0]; }) }

该代码使用了JavaScript数组的map方法，该方法遍历数组中的每个元素（选择data中的第一个元素）并执行操作（此处是返回第一个值）。传入的参数是一个函数。

找到数据网站：https://echarts.apache.org/examples/data/asset/data/aqi-beijing.json 在线格式化json：在线JSON校验格式化工具（Be JSON）可以看到第一列是年份

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 ECharts var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { title: { text: 'Beijing AQI', left: '1%' }, tooltip: { trigger: 'axis' }, grid: { left: '5%', right: '15%', bottom: '10%' }, xAxis: { data: ['2020/1/1', '2020/1/2', '2020/1/3'] }, yAxis: {}, toolbox: { right: 10, feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, dataZoom: [ { startValue: '2014-06-01' }, { type: 'inside' } ], visualMap: { top: 50, right: 10, pieces: [ { gt: 0, lte: 50, color: '#93CE07' }, { gt: 50, lte: 100, color: '#FBDB0F' }, { gt: 100, lte: 150, color: '#FC7D02' }, { gt: 150, lte: 200, color: '#FD0100' }, { gt: 200, lte: 300, color: '#AA069F' }, { gt: 300, color: '#AC3B2A' } ], outOfRange: { color: '#999' } }, series: { name: 'Beijing AQI', type: 'line', data: [110, 158, 216], markLine: { silent: true, lineStyle: { color: '#333' }, data: [ { yAxis: 50 }, { yAxis: 100 }, { yAxis: 150 }, { yAxis: 200 }, { yAxis: 250 } ] // markLine: { // data: [ // [ // { coord: [2, 100] }, // { coord: [3, 200] } // ], // [ // {}, // {} // ] // ] // } } } } option && myChart.setOption(option);

【本文地址】

Echarts

Echarts

今日新闻

推荐新闻