营销企业网站建设,开网站需要多少钱,wdcp 网站打不开,电子商务书城网站建设方案使用 ECharts 绘制咖啡店各年订单的可视化分析 在这篇博客中#xff0c;我将分享一段使用 ECharts 库创建可视化图表的代码。通过这段代码#xff0c;我们可以直观地分析咖啡店各年订单的情况。
饼图
这段代码包含了两个 ECharts 图表#xff0c;一个是饼图#xff0c;用…使用 ECharts 绘制咖啡店各年订单的可视化分析 在这篇博客中我将分享一段使用 ECharts 库创建可视化图表的代码。通过这段代码我们可以直观地分析咖啡店各年订单的情况。
饼图
这段代码包含了两个 ECharts 图表一个是饼图用于展示各年订单量的占比情况 $.getJSON(data/咖啡店各年订单.json, , function (data) {// 基于准备好的dom初始化ECharts图表var myChart1 echarts.init(document.getElementById(main1));var option1 { // 指定第1个图表option1的配置项和数据color: [#46eda9, #47e4ed, #4bbbee, #4f8fa8,#4586d8, #4f68d8,],backgroundColor: #d6ecf0, // 配置背景色rgba设置透明度0.1title: {text: 咖啡店各年订单量占比情况,color:#f3f9f1,x: center,y: 12,},tooltip: {trigger: item,formatter: {a}br/{b}:{c}({d}%)},legend: {orient: vertical,x: 15,y: 15,data: data.product},series: [{ // 配置第1个图表的数据系列name: 总订单量:,type: pie,radius: 70%,center: [50%, 190],data: data.data}]};myChart1.setOption(option1); // 使用指定的配置项和数据显示饼图
折线图
另一个是折线图可以更详细地展示不同年份的订单数据。 // 基于准备好的dom初始化ECharts图表var myChart2 echarts.init(document.getElementById(main2));var option2 { // 指定第2个图表的配置项和数据color: [#4f8fa8,#4586d8, #4f68d8, #F4E001, #F0805A, #26C0C0],backgroundColor: #e3f9fd, //配置背景色rgba设置透明度0.1tooltip: {trigger: axis,axisPointer: {type: shadow}}, //配置提示框组件toolbox: { // 配置第2个图表的工具箱组件show: true,orient: vertical,left: 550,top: center,feature: {mark: {show: true},restore: {show: true},saveAsImage: {show: true},magicType: {show: true,type: [line, bar, stack, tiled]}}},xAxis: [{type: category,data: data.product}], // 配置第2个图表的x轴坐标系yAxis: [{type: value,splitArea: {show: true}}], // 配置第2个图表的y轴坐标系series: [ // 配置第2个图表的数据系列{name: data.names1,type: line,data: data.values1,},{name: data.names2,type: line,data: data.values2,},{name: data.names3,type: line,data: data.values3,},{name: data.names4,type: line,data: data.values4,}]};myChart2.setOption(option2);
$.getJSON 方法
代码中我们通过 $.getJSON 方法获取了数据并将其应用于图表的配置中。
$.getJSON(data/咖啡店各年订单.json, , function (data) {}
每个图表都有自己的配置选项例如颜色、标题、坐标轴等。
//饼图配置项
var option1 {}
//折线图配置项
var option2 {}
特别值得一提的是这里还实现了多图表联动功能。通过设置相同的 group 值或直接传入 ECharts 对象我们可以在不同图表之间建立关联当在一个图表中进行操作时另一个图表也会相应地做出反应。
多表联动功能
方法一
// 多图表联动配置方法1分别设置每个echarts对象的group值myChart1.group group1;myChart2.group group1;echarts.connect(group1);
方法二
多图表联动配置方法2直接传入需要联动的echarts对象myChart1myChart2echarts.connect([myChart1, myChart2]); 完整代码
!DOCTYPE html
htmlheadmeta charsetutf-8script typetext/javascript srcjs/echarts.js/scriptscript typetext/javascript srcjs/jquery-3.3.1.js/script
/headbodydiv idmain1 stylewidth: 600px; height:400px/divdiv idmain2 stylewidth: 600px; height:400px/divscript typetext/javascript$.getJSON(data/咖啡店各年订单.json, , function (data) {// 基于准备好的dom初始化ECharts图表var myChart1 echarts.init(document.getElementById(main1));var option1 { // 指定第1个图表option1的配置项和数据color: [#46eda9, #47e4ed, #4bbbee, #4f8fa8,#4586d8, #4f68d8,],backgroundColor: #d6ecf0, // 配置背景色rgba设置透明度0.1title: {text: 咖啡店各年订单量占比情况,color:#f3f9f1,x: center,y: 12,},tooltip: {trigger: item,formatter: {a}br/{b}:{c}({d}%)},legend: {orient: vertical,x: 15,y: 15,data: data.product},series: [{ // 配置第1个图表的数据系列name: 总订单量:,type: pie,radius: 70%,center: [50%, 190],data: data.data}]};myChart1.setOption(option1); // 使用指定的配置项和数据显示饼图// 基于准备好的dom初始化ECharts图表var myChart2 echarts.init(document.getElementById(main2));var option2 { // 指定第2个图表的配置项和数据color: [#4f8fa8,#4586d8, #4f68d8, #F4E001, #F0805A, #26C0C0],backgroundColor: #e3f9fd, //配置背景色rgba设置透明度0.1tooltip: {trigger: axis,axisPointer: {type: shadow}}, //配置提示框组件toolbox: { // 配置第2个图表的工具箱组件show: true,orient: vertical,left: 550,top: center,feature: {mark: {show: true},restore: {show: true},saveAsImage: {show: true},magicType: {show: true,type: [line, bar, stack, tiled]}}},xAxis: [{type: category,data: data.product}], // 配置第2个图表的x轴坐标系yAxis: [{type: value,splitArea: {show: true}}], // 配置第2个图表的y轴坐标系series: [ // 配置第2个图表的数据系列{name: data.names1,type: line,data: data.values1,},{name: data.names2,type: line,data: data.values2,},{name: data.names3,type: line,data: data.values3,},{name: data.names4,type: line,data: data.values4,}]};myChart2.setOption(option2); // 使用指定的配置项和数据显示堆叠柱状图// 多图表联动配置方法1分别设置每个echarts对象的group值myChart1.group group1;myChart2.group group1;echarts.connect(group1);// 多图表联动配置方法2直接传入需要联动的echarts对象myChart1myChart2//echarts.connect([myChart1, myChart2]);})/script
/body/html
总的来说这段代码展示了如何使用 ECharts 库创建美观、实用的可视化图表为数据分析提供了有力的支持。希望这篇博客能对大家有所帮助如果有任何问题或建议欢迎留言交流。
