Echarts数据可视化toolbox工具框,开发全解+完美注释

全栈工程师开发手册 (作者:栾鹏)

Echarts数据可视化开发代码注释全解
Echarts数据可视化开发参数配置全解

6大公共组件详解(点击进入):
title详解tooltip详解toolbox详解legend详解dataZoom详解visualMap全解
5大坐标系详解(点击进入):
地理坐标系geo详解grid直角坐标系(xAxis、yAxis)详解parallel平行坐标系详解polar极坐标系详解radar雷达坐标系详解
19种图表类型详解(点击进入,待续):
series-bar柱形图详解series-effectscatter特效散点图series-graph关系图series-heatmap热力图series-line线图series-map地图series-pie饼图series-radar雷达图series-scatter散点图

Echarts数据可视化toolbox工具框详解:

toolbox={
    show : true,                                 //是否显示工具栏组件
    orient:"horizontal",                        //工具栏 icon 的布局朝向'horizontal' 'vertical'
    itemSize:15,                                 //工具栏 icon 的大小
    itemGap:10,                                  //工具栏 icon 每项之间的间隔
    showTitle:true,                             //是否在鼠标 hover 的时候显示每个工具 icon 的标题
    feature : {
        mark : {                                 // '辅助线开关'
            show: true
        },
        dataView : {                            //数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新
            show: true,                         //是否显示该工具。
            title:"数据视图",
            readOnly: false,                    //是否不可编辑(只读)
            lang: ['数据视图', '关闭', '刷新'],  //数据视图上有三个话术,默认是['数据视图', '关闭', '刷新']
            backgroundColor:"#fff",             //数据视图浮层背景色。
            textareaColor:"#fff",               //数据视图浮层文本输入区背景色
            textareaBorderColor:"#333",         //数据视图浮层文本输入区边框颜色
            textColor:"#000",                    //文本颜色。
            buttonColor:"#c23531",              //按钮颜色。
            buttonTextColor:"#fff",             //按钮文本颜色。
        },
        magicType: {                            //动态类型切换
            show: true,
            title:"切换",                       //各个类型的标题文本,可以分别配置。
            type: ['line', 'bar'],              //启用的动态类型,包括'line'(切换为折线图), 'bar'(切换为柱状图), 'stack'(切换为堆叠模式), 'tiled'(切换为平铺模式)
        },
        restore : {                             //配置项还原。
            show: true,                         //是否显示该工具。
            title:"还原",
        },
        saveAsImage : {                         //保存为图片。
            show: true,                         //是否显示该工具。
            type:"png",                         //保存的图片格式。支持 'png' 和 'jpeg'。
            name:"pic1",                        //保存的文件名称,默认使用 title.text 作为名称
            backgroundColor:"#ffffff",        //保存的图片背景色,默认使用 backgroundColor,如果backgroundColor不存在的话会取白色
            title:"保存为图片",
            pixelRatio:1                        //保存图片的分辨率比例,默认跟容器相同大小,如果需要保存更高分辨率的,可以设置为大于 1 的值,例如 2
        },
        dataZoom :{                             //数据区域缩放。目前只支持直角坐标系的缩放
            show: true,                         //是否显示该工具。
            title:"缩放",                       //缩放和还原的标题文本
            xAxisIndex:0,                       //指定哪些 xAxis 被控制。如果缺省则控制所有的x轴。如果设置为 false 则不控制任何x轴。如果设置成 3 则控制 axisIndex 为 3 的x轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的x轴
            yAxisIndex:false,                   //指定哪些 yAxis 被控制。如果缺省则控制所有的y轴。如果设置为 false 则不控制任何y轴。如果设置成 3 则控制 axisIndex 为 3 的y轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的y轴
        },
    },
    zlevel:0,                                   //所属图形的Canvas分层,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
    z:2,                                         //所属组件的z分层,z值小的图形会被z值大的图形覆盖
    left:"center",                              //组件离容器左侧的距离,'left', 'center', 'right','20%'
    top:"top",                                   //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
    right:"auto",                               //组件离容器右侧的距离,'20%'
    bottom:"auto",                              //组件离容器下侧的距离,'20%'
    width:"auto",                               //图例宽度
    height:"auto",                              //图例高度
};
  • 16
    点赞
  • 83
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
鸢尾花数据集是机器学习领域中非常经典的一个数据集,包含150条记录,每条记录有4个特征,分别是花萼长度、花萼宽度、花瓣长度、花瓣宽度,以及它们所属的3个类别之一:Setosa、Versicolour、Virginica。 我们可以使用ECharts来对这个数据集进行可视化分析,具体步骤如下: 1.准备数据 首先,我们需要将鸢尾花数据集导入到程序中,并进行处理。可以使用Python的pandas库来读取CSV文件,然后将数据转换成ECharts需要的格式。 2.绘制散点图 使用ECharts的散点图功能,将每个样本点绘制在坐标系上。可以根据鸢尾花的类别,将不同类别的样本点用不同的颜色表示。 3.添加坐标轴和图例 通过设置xAxis、yAxis和legend等属性,添加坐标轴和图例,使得图表更加清晰易懂。 4.添加工具箱 使用ECharts工具箱功能,可以为图表添加一些交互式的工具,如缩放、刷新、保存等。 以下是一份基于ECharts的鸢尾花数据可视化代码示例: ```javascript // 基于ECharts的鸢尾花数据可视化 // 导入数据 var data = [ [5.1, 3.5, 1.4, 0.2, 'Setosa'], [4.9, 3.0, 1.4, 0.2, 'Setosa'], [4.7, 3.2, 1.3, 0.2, 'Setosa'], [4.6, 3.1, 1.5, 0.2, 'Setosa'], ... ]; // 转换数据格式 var series = []; for (var i = 0; i < data.length; i++) { var item = { value: [data[i][0], data[i][1], data[i][2], data[i][3]], symbol: 'circle', symbolSize: 10, itemStyle: { color: data[i][4] === 'Setosa' ? 'red' : data[i][4] === 'Versicolour' ? 'green' : 'blue' } }; series.push(item); } // 绘制图表 var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ title: { text: '鸢尾花数据可视化' }, tooltip: {}, legend: { data: ['Setosa', 'Versicolour', 'Virginica'] }, xAxis: {}, yAxis: {}, series: [{ name: 'Setosa', type: 'scatter', data: series.filter(function(item) { return item.itemStyle.color === 'red'; }) }, { name: 'Versicolour', type: 'scatter', data: series.filter(function(item) { return item.itemStyle.color === 'green'; }) }, { name: 'Virginica', type: 'scatter', data: series.filter(function(item) { return item.itemStyle.color === 'blue'; }) }], toolbox: { feature: { saveAsImage: {} } } }); ``` 这份代码将鸢尾花数据集中的四个特征绘制在坐标系上,不同类别的样本点用不同的颜色表示,图表中还包含了图例和工具箱。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

腾讯AI架构师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值