ECharts（Enterprise Charts）是一个基于 JavaScript 的开源可视化图表库，由百度开发和维护。ECharts 提供了丰富多样的图表类型，并支持动态数据更新、数据过滤、数据缩放等交互功能，可以在 Web、Node.js、微信小程序、React Native 等项目中使用。
ECharts 支持的图表类型包括折线图、柱状图、散点图、饼图、雷达图等，同时还提供了混搭图、地图、热力图、仪表盘等复杂图表。ECharts 的优点在于其灵活性和可扩展性，用户只需要按照要求提供数据和配置项，即可自定义样式和布局。
饼图：
雷达图：
折线图：
柱状图：
漏斗图：
北极柱状图：
HTML：
<body> <div id="tubiao"></div> <button onclick="renderBar()">饼图</button> <button onclick="renderRadar()">雷达图</button> <button onclick="renderLine()">折线图</button> <button onclick="histogram()">柱状图</button> <button onclick="funnelPlot()">漏斗图</button> <button onclick="polar()">北极柱状图</button> <script src="js/new_file.js"> </script>
CSS：
<style> #tubiao { width: 800px; height: 600px; } </style>
JS:
let data = [] let myChart = echarts.init(document.getElementById('tubiao')); $.ajax({ type: "get", url: "./js/图表数组.json", success: function(res) { console.log(res); data = res renderBar() } }) // 渲染饼图 function renderBar() { let arr = JSON.parse(JSON.stringify(data)); // 这是for循环的方法，简单 // for (let i = 0; i < data.length; i++) { // data[i].value = data[i].num // delete data[i].num // } // 这是filter方法,后面经常用到 arr.filter(function(itme) { itme.value = itme.num; delete itme.num }) // sort排序 arr.sort(function(a, b) { return b.value - a.value }) let option = { title: { text: "汉宫之年鹏enpi", left: "center" }, legend: { left: "left", top: 'bottom', orient: "vertical" }, toolbox: { show: true, feature: { dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true } } }, series: [{ name: '数据', type: 'pie', radius: [50, 260], center: ['50%', '60%'], roseType: 'area', itemStyle: { borderRadius: 12 }, data: arr }] }; myChart.setOption(option, true); } // 渲染饼图 function renderRadar() { let arr = JSON.parse(JSON.stringify(data)); let maxs = []; let vals = []; arr.filter(function(itme) { maxs.push({ name: itme.name, maxs: 100 }) vals.push(itme.num); }) let option = { title: { text: '汉宫之年鹏enpi', left: "center" }, legend: { data: ['数据'], left: "left", top: 'bottom', orient: "vertical" }, radar: { indicator: maxs }, series: [{ name: '数据', type: 'radar', data: [{ value: vals, name: '汉宫之年鹏enpi' }] }] }; myChart.setOption(option, true); } // 渲染折线图 function renderLine() { let arr = JSON.parse(JSON.stringify(data)); let maxs = []; let vals = []; let name = [] arr.filter(function(itme) { maxs.push({ name: itme.name, maxs: 100 }) vals.push(itme.num); name.push(itme.name); }) let option = { title: { text: '汉宫之年鹏enpi', left: "center" }, xAxis: { type: 'category', data: name }, yAxis: { type: 'value' }, series: [{ name: '数据', data: vals, type: 'line' }] }; myChart.setOption(option, true); } // 渲染柱状图 function histogram() { let arr = JSON.parse(JSON.stringify(data)); let maxs = []; let vals = []; let name = []; arr.filter(function(itme) { maxs.push({ name: itme.name, maxs: 100 }) vals.push(itme.num); name.push(itme.name); }) let option = { title: { text: '汉宫之年鹏enpi', left: "center" }, legend: { data: ['数据'], left: "left", top: 'bottom', orient: "vertical" }, xAxis: { type: 'category', data: name }, yAxis: { type: 'value', }, series: [{ name: '数据', data: vals, type: 'bar' }] }; myChart.setOption(option, true); } // 渲染漏斗图 function funnelPlot() { let arr = JSON.parse(JSON.stringify(data)); arr.filter(function(itme) { itme.value = itme.num; delete itme.num }) let option = { title: { text: '汉宫之年鹏enpi', left: "center" }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c}%' }, toolbox: { feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} } }, legend: { data: ['突破', '手枪', '自由人', '狙击', '指挥','拍桌子'], left: "left", top: 'bottom', orient: "vertical" }, series: [{ name: '数据', type: 'funnel', left: '10%', top: 60, bottom: 60, width: '80%', min: 0, max: 100, minSize: '0%', maxSize: '100%', sort: 'descending', gap: 2, label: { // show: true, position: 'inside' }, labelLine: { length: 10, lineStyle: { width: 1, type: 'solid' } }, itemStyle: { borderColor: '#fff', borderWidth: 1 }, emphasis: { label: { fontSize: 20 } }, data: arr }] }; myChart.setOption(option, true); } // 北极柱状图 function polar(){ let arr = JSON.parse(JSON.stringify(data)); let maxs = []; let vals = []; let name = []; arr.filter(function(itme) { maxs.push({ name: itme.name, maxs: 100 }) vals.push(itme.num); name.push(itme.name); }) let option = { title: [ { text: '汉宫之年鹏enpi', left: "center" } ], polar: { radius: [30, '80%'] }, angleAxis: { max: 110, startAngle: 75 }, radiusAxis: { type: 'category', data: name }, tooltip: {}, series: { name:'数据', type: 'bar', data: vals, // [2, 1.2, 2.4, 3.6,3.8], coordinateSystem: 'polar', label: { // show: true, position: 'middle', formatter: '{b}: {c}' } } }; myChart.setOption(option, true); }
ECharts:
ECharts官网找到这个文件下载，放到JS文件里。
jquery-3.7.0：
jQuery是一个流行的JavaScript库，它简化了HTML文档操作、事件处理、动画和用于web开发的Ajax交互。它提供了一个简洁和易于使用的API(应用程序编程接口)，允许开发人员编写更少的代码来实现强大的网页效果。jQuery支持广泛的web浏览器，使创建交互式、响应式和动态web应用程序变得容易。
也要来个jquery文件然后丢JS里面。
图表数组.json：
在JS文件里创建个JSON文件
[ { "name":"狙击", "num":75 },{ "name":"指挥", "num":88 },{ "name":"自由人", "num":65 },{ "name":"突破", "num":44 },{ "name":"手枪", "num":56 },{ "name":"拍桌子", "num":100 } ]
ECharts 提供了多种使用方式，包括基于 DOM、Canvas 和 SVG 的渲染，可以适配不同的浏览器和设备。同时还支持多语言和多机房的数据联动、图形标记和动画效果等高级功能，满足了各种数据可视化的需求。
