EChart学习

最新推荐文章于 2024-08-13 18:13:57 发布
最新推荐文章于 2024-08-13 18:13:57 发布
阅读量1.4k 收藏 7
点赞数 2
分类专栏： 框架学习

目录

一、接触EChart

1.柱状图

1.1、引入：只需要像普通的 JavaScript 库一样用 script 标签引入。

1.2、绘制简单表格

2.饼图

二、ECharts的样式

1、颜色主题

2、调色板

3.直接样式设置

3.1、高亮样式：emphasis

4.视觉映射：通过visualMap组件设定样式

三、异步获取数据和更新

1、异步获取数据

2、loading加载动画

3、数据的动态更新

四、dataset（数据集）管理数据

1、入门例子

2、数据到图表的映射

3、维度（dimension）

4、视觉通道（颜色、尺寸等）的映射

5、默认的映射规则

6、其他

 

参考网站：http://echarts.baidu.com/tutorial.html

这篇文章由于自己的快速学习，所以主要是复制参考网页的重点来帮助自己记忆。

一、接触EChart

1.柱状图

1.1、引入：只需要像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

1.2、绘制简单表格

1准备一个具备宽高的DOM容器

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

2通过echart.init方法初始化容器，通过setOption生成一个柱状图

<body>
    <!--
       1.柱状图 
    -->
    <!-- 1.1为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="ech1" style="width: 600px;height:400px;"></div>
    
    <script>
        //1.2初始化dom容器
        var ech1 = echarts.init(document.getElementById("ech1"));
        
        //指定图表的配置项和数据
        var option = {
            title:{
                text:"1：柱状图"
            },
            tooltip:{},
            legend:{data:['数量','价格']},//该柱状图拥有的类型
            xAxis:{
                data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] //数组，显示的数据
            },
            yAxis:{
                data:[] //数组，y轴显示
            },
            series:[{
                name:'数量',
                type:'bar',//显示类型为柱状图
                data:[5, 20, 36, 10, 10, 20]//数据量
            },{
                name:'价格',
                type:'bar',//显示类型为柱状图
                data:[5, 20, 36, 10, 10, 20]//数据量
            }]
            
        }
        //使用刚指定的配置项和数据显示图表
        ech1.setOption(option);
    </script>
</body>

2.饼图

饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要xAxis，yAxis

<!--
	2.饼状图
-->
<!-- 2.1准备dom容器 -->
<div id="ech2" style="width: 600px;height:400px;"></div>
<!-- 2.2绘制饼状图 -->
<script>
    var ech2 = echarts.init(document.getElementById("ech2"));
    ech2.setOption({
        title:{
            text:"2:饼状图"
        },
        backgroundColor: '#2c343c',//设置全局背景（在使用bmap（百度地图的js）时，有时候会将地图给覆盖）
        //visualMap 组件（也就是左下角的一个数值的程度统计）将数值的大小映射到明暗度
        visualMap: {
            // 不显示 visualMap 组件，只用于明暗度的映射
            show: false,
            // 映射的最小值为 80
            min: 80,
            // 映射的最大值为 600
            max: 600,
            inRange: {
                // 明暗度的范围是 0 到 1
                colorLightness: [0, 1]
            }
        },
        textStyle: {//设置全局样式（可有多种属性）
//                  color: 'rgba(255, 255, 255, 0.3)'
        },
        series:[{
            name:"访问来源",
            type:"pie",
            radius:"55%",//半径（也就是大小）
            //这里data属性值不像入门教程里那样每一项都是单个数值，而是一个包含 name 和 value 属性的对象，
            //ECharts 中的数据项都是既可以只设成数值，也可以设成一个包含有名称、该数据图形的样式配置、标签配置的对象
            data:[//格式为[{value:"值",name:"值的名字"},{第二块},{第三块},....]
                //{value:350, name:'视频广告',itemStyle:{normal:{color:"blue"}}},//可以为data数据单独设置样式（这里我们先注释）
                {value:350, name:'视频广告'},
                {value:274, name:'联盟广告'},
                {value:310, name:'邮件营销'},
                {value:335, name:'直接访问'},
                {value:400, name:'搜索引擎'}
            ],
            roseType:"angle",//通过roseType来将饼状图设置为南丁格尔图
            //通过itemStyle设置系列的样式
            itemStyle: {
                //normal表示正常情况下的样式（emphasis表示高亮（也就是选中时））
                normal: {
                    // 设置扇形的颜色
                    color: '#c23531',
//                          //阴影的大小
//                          shadowBlur: 200,
//                          //阴影颜色
//                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                //
                emphasis:{
                    //阴影的大小
                    shadowBlur: 200,
                    // 阴影 水平方向 的偏移
                    shadowOffsetX: 0,
                    // 阴影 垂直方向 的偏移
                    shadowOffsetY: 0,
                    //阴影颜色
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {//标签（如：视频广告，等字体）设置。样式也可在系列之中，单独设置
                normal:{
                    textStyle: {//设置样式
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                }
            },
            labelLine: {//视觉引导线（就是那根指向视频广告的线）
                normal: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                }
            },
            
        }]
    });
</script>

 

二、ECharts的样式

概述：用哪些方法，可以设置设置样式，改变图形元素或者文字的颜色、明暗、大小等

四种方式：同一种细节的效果可能可以用不同的方式实现，但是他们各有各的场景偏好。

  • 颜色主题（Theme）
  • 调色盘
  • 直接样式设置（itemStyle、lineStyle、areaStyle、label、...）
  • 视觉映射（visualMap）

1、颜色主题

1、ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 'light' 和 'dark'。可以这么来使用它们：

var chart = echarts.init(dom, 'light');//好像没效果

2、其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 主题编辑器 里访问到。也可以使用这个主题编辑器，自己编辑主题。

// 假设主题名称是 "vintage"
$.getJSON('xxx/xxx/vintage.json', function (themeJSON) {
    echarts.registerTheme('vintage', JSON.parse(themeJSON))
    var chart = echarts.init(dom, 'vintage');
});

2、调色板

调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。 可以设置全局的调色盘，也可以设置系列自己专属的调色盘。

option = {
    // 全局调色盘。
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

    series: [{
        type: 'bar',
        // 此系列自己的调色盘。
        color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
        ...
    }, {
        type: 'pie',
        // 此系列自己的调色盘。
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
        ...
    }]
}

还有一个UMD格式（详见官网）

3.直接样式设置

直接的样式设置是比较常用设置方式。纵观 ECharts 的 option 中，很多地方可以设置 itemStyle、lineStyle、areaStyle、label 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。

tips（重点写一下）：一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，itemStyle、label 等可能出现在不同的地方。

3.1、高亮样式：emphasis

默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 emphasis 属性来定制。

//这个是4.0版本的（被坑过。。。）
option = {
    series: {
        type: 'scatter',

        // 普通样式。
        itemStyle: {
            // 点的颜色。
            color: 'red'
        },
        label: {
            show: true,
            // 标签的文字。
            formatter: 'This is a normal label.'
        },

        // 高亮样式。
        emphasis: {
            itemStyle: {
                // 高亮时点的颜色。
                color: 'blue'
            },
            label: {
                show: true,
                // 高亮时标签的文字。
                formatter: 'This is a emphasis label.'
            }
        }
    }
}

//在 ECharts4 以前，高亮和普通样式的写法，是这样的：
option = {
    series: {
        type: 'scatter',

        itemStyle: {
            // 普通样式。
            normal: {
                // 点的颜色。
                color: 'red'
            },
            // 高亮样式。
            emphasis: {
                // 高亮时点的颜色。
                color: 'blue'
            }
        },

        label: {
            // 普通样式。
            normal: {
                show: true,
                // 标签的文字。
                formatter: 'This is a normal label.'
            },
            // 高亮样式。
            emphasis: {
                show: true,
                // 高亮时标签的文字。
                formatter: 'This is a emphasis label.'
            }
        }
    }
}
//这种写法 仍然被兼容，但是，不再推荐。

4.视觉映射：通过visualMap组件设定样式

数据可视化是数据到视觉元素的映射过程。（比如把数据变成看的见的图形）

还可通过visualMap组件来提供通用的视觉映射，可使用的视觉元素有：

  • 图形类别：symbol
  • 图形大小：symbolSize
  • 颜色：color
  • 透明度：opacity
  • 颜色透明度：colorAlpha
  • 颜色明暗度：colorLightness
  • 颜色饱和度：colorSaturation
  • 色调：colorHue
//简单的一个visualMap
visualMap:{
	type:'continuous',//连续型  （piecewise:分段型）
	text:['high','low'],//显示的文本
	color:['blue','green'],//从一个颜色至另一个颜色的过渡
},

 

 

三、异步获取数据和更新

1、异步获取数据

ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

<!-- 3.异步数据加载和更新 -->

<!-- 3.1准备dom容器 -->
<div id="ech3" style="width: 600px;height:400px;"></div>
<!-- 3.2异步加载（也就和前面没什么差别） -->
<script>
    var ech3 = echarts.init(document.getElementById('ech3'));

    // 显示标题，图例和空的坐标轴
    ech3.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }]
    });

    $.get('data.json').done(function (data) {//成功执行之后，通过回调函数的参数获得数据
        console.info(JSON.stringify(data));
        ech3.setOption({
            title: {
                text: '异步数据加载示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: data.categories
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: data.data
            }]
        });
    });
</script>

 

2、loading加载动画

如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。

myChart.showLoading();//只需调用该方法，来显示Echarts默认的加载动画
$.get('data.json').done(function (data) {//可以使用setTimeout来模拟
    myChart.hideLoading();//当然，加载成功之后，还得关掉它
    myChart.setOption(...);
});

 

3、数据的动态更新

所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

 

四、dataset（数据集）管理数据

ECharts 4 开始支持了 dataset 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。这在不少场景下能带来使用上的方便。

与平常使用series中声明数据方式的区别

1.数据声明在series中：（只能在ECharts4版本前使用）

  • 优点：直观易理解，适于对特殊图表类型数据进行一定的数据限制
  • 缺点：为匹配这种数据输入形式，常需要有数据处理的过程，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于数据原始进行图表类型、系列的映射安排。

2.数据声明在dataset中

  • 能够贴近这样的数据可视化常见思维方式：基于数据（dataset 组件来提供数据），指定数据到视觉的映射（由 encode 属性来指定映射），形成图表。
  • 数据和其他配置可以被 分离 开来，使用者相对便于进行单独管理，也省去了一些数据处理的步骤。
  • 数据可以被多个系列或者组件 复用 ，对于大数据，不必为每个系列创建一份。
  • 支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。

 

1、入门例子

<div id="ech1" style="width: 600px;height:400px;"></div>

<script>
    //初始化echarts容器
    var ech1 = echarts.init(document.getElementById("ech1"));
    
    //设置配置项与数据
    var option = {
        title:{
            text:"dataset初步使用"
        },
        legend:{},//显示各系列分类的组件
        tooltip:{},//提示框
//	            dataset:{//数据集
//  	            source:[//提供一份数据
//      	            ["product","2015","2016","2017"],
//      	            ['Matcha Latte', 43.3, 85.8, 93.7],
//                      ['Milk Tea', 83.1, 73.4, 55.1],
//                      ['Cheese Cocoa', 86.4, 65.2, 82.5],
//                      ['Walnut Brownie', 72.4, 53.9, 39.1]
//  	            ]
//	            },
        //也可以使用对象数组的方式，来提供数据
        dataset: {
            // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
            // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
            dimensions: ['product', '2015', '2016', '2017'],
            source: [
                {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
                {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
                {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
                {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
            ]
        },
        //x轴为类目轴，那么y轴就成为了数值轴了
        xAxis:{//x轴：类目轴（category）。默认情况，类目轴对应dataset的第一列
            type:"category"
        },
        yAxis:{},//y轴：数值轴
        series:[//多个bar系列，默认情况下，每个系列会自动对应到dataset的每一列
           {type:"bar"},
           {type:"bar"},
           {type:"bar"}
        ]
    }
    ech1.setOption(option);
</script>

默认：类目轴为列（也就是说，系列分为了：2015、2016、2017，每个类目都有这几个系列）

2、数据到图表的映射

  • 指定 dataset 的列（column）还是行（row）映射为图形系列（series）。这件事可以使用 series.seriesLayoutBy 属性来配置。默认是按照列（column）来映射。
  • 指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 series.encode 属性，以及 visualMap 组件（如果有需要映射颜色大小等视觉维度的话）来配置。
<div id="ech2" style="width: 600px;height:400px;"></div>

<script>
    //初始化echarts容器
    var ech2 = echarts.init(document.getElementById("ech2"));
    
    //设置配置项与数据
    var option = {
        legend: {},
        tooltip: {},
        dataset: {
            source: [
                ['product', '2012', '2013', '2014', '2015'],
                ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
                ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
                ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
            ]
        },
        //设置每个网格的x轴为类目轴（因为有了grid网格，所以需要使用数组的方式）
        xAxis: [
            {type: 'category', gridIndex: 0},//显示在第一个格子
            {type: 'category', gridIndex: 1}//显示在第二个格子
        ],
        //数值轴
        yAxis: [
            {gridIndex: 0},
            {gridIndex: 1}
        ],
        grid: [//直角坐标系中，绘图网格（也就是说可以分为多个直角坐标系）
            {bottom: '55%'},//第一个格子离下方距离
            {top: '55%'}//第二个格子离上方距离
        ],
        series: [
            // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的 每一行。
            {type: 'bar', seriesLayoutBy: 'row'},//系列被安放在行上。（seriesLayoutBy：默认为column）
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的 每一列。
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
        ]
    }
    ech2.setOption(option);
</script>

 

3、维度（dimension）

// 硬着头皮还是要看一下这些概念的，可以很好的帮助理解为什么要设置那些参数。

介绍 encode 之前，首先要介绍“维度（dimension）”的概念。

常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。

维度可以有单独的名字，便于在图表中显示。维度名（dimension name）可以在定义在 dataset 的第一行（或者第一列）。例如上面的例子中，'score'、'amount'、'product' 就是维度名。从第二行开始，才是正式的数据。dataset.source 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 dataset.sourceHeader: true 显示声明第一行（列）就是维度，或者 dataset.sourceHeader: false表明第一行（列）开始就直接是数据。

维度的定义，也可以使用单独的 dataset.dimensions 或者 series.dimensions 来定义，这样可以同时指定维度名，和维度的类型（dimension type）：

//这里不是太理解，后面理解在补上
var option1 = {
    dataset: {
        dimensions: [
            {name: 'score'},
            // 可以简写为 string，表示维度名。
            'amount',
            // 可以在 type 中指定维度类型。
            //type：我们并不需要去设置维度类型，因为会自动判断。
            //但是如果因为数据为空之类原因导致判断不足够准确时，可以手动设置维度类型。
            {name: 'product', type: 'ordinal'}
        ],
        source: [...]
    },
    ...
};

var option2 = {
    dataset: {
        source: [...]
    },
    series: {
        type: 'line',
        // 在系列中设置的 dimensions 会更优先采纳。
        dimensions: [
            null, // 可以设置为 null 表示不想设置维度名
            'amount',
            {name: 'product', type: 'ordinal'}
        ]
    },
    ...
};

4、视觉通道（颜色、尺寸等）的映射

可使用visualMap组件进行视觉通道的映射

 

5、默认的映射规则

  • 在坐标系中（如直角坐标系、极坐标系等）
    • 如果有类目轴（axis.type 为 'category'），则将第一列（行）映射到这个轴上，后续每一列（行）对应一个系列。
    • 如果没有类目轴，假如坐标系有两个轴（例如直角坐标系的 X Y 轴），则每两列对应一个系列，这两列分别映射到这两个轴上。
  • 如果没有坐标系（如饼图）
    • 取第一列（行）为名字，第二列（行）为数值（如果只有一列，则取第一列为数值）。55

默认的规则不满足要求时，也可以通过encode来配置。

 

6、其他

1、dataset也支持key-value方式的数据格式，但是这类格式并不支持seriesLayoutBy参数

2、可以同时定义多个dataset（就是使用数组的形式），系列可以通过series.datasetIndex来制定引用哪个dataset。

3、如果系列（series）已经声明了series.data那么就会使用series.data而非dataset。

4、目前并非所有图表都支持 dataset。支持 dataset 的图表有： line、bar、pie、scatter、effectScatter、parallel、candlestick、map、funnel、custom。

 

五、图表的交互组件

组件分为：

//描述：数据区域缩放组件：dataZoom
<div id="ech1" style="width: 600px;height: 400px;"></div>
<script>
    var ech1 = echarts.init(document.getElementById("ech1"));
    
    var option = {
        title:{
            text:"ech1"
        },
        tooltip:{},
        legend:{
            data:["价格","数量"]
        },
        xAxis:{
            data:["西瓜","南瓜","冬瓜","西红柿","香蕉","苹果"]
        },
        yAxis:{},
        dataZoom:[
           {//默认控制的是x轴
               type:'slider',//slider：滑动来控制
               //xAxisIndex:0,//默认就是x轴，可不用设置
               start:20,//开始在50%的位置
               end:10//结束在10%的位置
           },
           {//添加鼠标滚轮（或移动触屏的两指滑动）控制（默认x轴）
               type:"inside",//能够拖动坐标系、以及使用鼠标滚轮控制
               start:20,
               end:10
               
           },
           {//y轴添加滑动控制
               type:"slider",
               yAxisIndex:0,//设置为控制y轴
               start:30,
               end:80
           },
           {//y轴添加滚轮控制
               type:"inside",
               yAxisIndex:0,//设置为控制y轴
               start:30,
               end:80
           }
        ],
        series:[{
            name:"数量",
            type:"bar",
            data:[1,2,3,4,5,6],
            itemStyle:{
                color:"blue"
            }
        },{
            name:"价格",
            type:"bar",
            data:[100,50,60,75,21,35],
            itemStyle:{
                color:"green"
            }
        }],
    }
    ech1.setOption(option);
</script>

 

六、移动端自适应

1、定位方式：大部分『组件』和『系列』会遵循两种定位方式：

1.1、left/right/bottom/top/height/width定位方式

1.每个量都可以是绝对值（left:23）、百分比（left:50%）、位置描述（left:'center'//水平居中）

  • left/right/bottom/top：离DOM容器左/右/下/上边界的距离
  • height/width：高/宽

2.与ECharts2的兼容

ECharts2 中的 x/x2/y/y2 的命名方式仍被兼容，对应于 left/right/top/bottom。但是建议写 left/right/top/bottom。

位置描述中，为兼容 ECharts2，可以支持一些看起来略奇怪的设置：left: 'right'、left: 'left'、top: 'bottom'、top: 'top'。这些语句分别等效于：right: 0、left: 0、bottom: 0、top: 0，写成后者就不奇怪了。

1.2、center、radius定位方式

  • center

    是一个数组，表示 [x, y]，其中，x、y可以是『绝对值』或者『百分比』，含义和前述相同。

  • radius

    是一个数组，表示 [内半径, 外半径]，其中，内外半径可以是『绝对值』或者『百分比』，含义和前述相同。

    在自适应容器大小时，百分比设置是很有用的。

2、纵向（vertical）、横向（horizontal）布局方式

横纵向布局的设置，一般在『组件』或者『系列』的 orient 或者 layout 配置项上，设置为 'horizontal' 或者 'vertical'。

 

3、Media Query

Media Query 提供了『随着容器尺寸改变而改变』的能力。要在 option 中设置 Media Query 须遵循如下格式：

option = {
    baseOption: { // 这里是基本的『原子option』。
        title: {...},
        legend: {...},
        series: [{...}, {...}, ...],
        ...
    },
    media: [ // 这里定义了 media query 的逐条规则。
        {
            query: {...},   // 这里写规则。
            option: {       // 这里写此规则满足下的option。
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二个规则。
            option: {       // 第二个规则对应的option。
                legend: {...},
                ...
            }
        },
        {                   // 这条里没有写规则，表示『默认』，
            option: {       // 即所有规则都不满足时，采纳这个option。
                legend: {...},
                ...
            }
        }
    ]
};

 

七.事件和行为

 

rainy-g
关注
专栏目录
echarts 高级应用
aoshisen的博客
08-27 3083
文章目录多坐标轴异步数据数据集数据集与图表的映射方式数据集的行列映射数据集的维度映射dimensions 中元素的书写方式数据集的编码映射encode 编码映射的使用方法区域缩放视觉映射 多坐标轴 多坐标轴的常见应用就是一个图表有两个y 轴。 多坐标轴的设置方法： 在yAxis 中写入两组数据，让两组数据的行数保持一致 在series 中设置数据时，使用 yAxisIndex 属性设置系列与哪个y 轴相关联 异步数据 数据的更新有两种思路： 请求到数据后，setOption() 先setOption(
echart学习-2
LUSHIJIE__的博客
12-15 700
echart学习 文章目录echart学习一、echart中系列的含义：二、系列的类型三、配置方式3.1.配置方式一（series配合）：3.2.配置方式二（dataset和series的配合使用）：四、相关组件4.1.组件定位4.2.中心半径定位五、坐标系5.1.直角坐标系方式5.2.两个y轴的方式5.3.两个grid的方式六、南丁格尔图6.1.代码6.2.运行结果七、下载和导入使用主题7.1.下载7.2.导入和使用7.2.1不同文件的不同导入方式八、异步加载8.1.json数据格式：8.2.echart
如何理解echarts中的系列series和维度dimensions
TreepoBear的博客
04-05 2108
当然这只是画图展示的维度，分组下钻可以无限钻下去的，举个例子，做AB实验，实验组别=》每个实验组别里面再分组。毕竟直角坐标系是个二维的图，把取值这个维度放在y轴，只剩下一个维度x轴。直角坐标系，自带两个维度，x和y。如果再分个组，有四个维度了，只能组合其中两个维度，比如x轴放年份，颜色是A组-MachaLatte这种组合的形式。官网的例子里，x轴的类型是类目轴category，而且含义就是类目，类目这个维度体现在x轴上。对于不同的坐标系，有不同的映射方式，最经典的，直角坐标系，指定x，y用哪个维度。
Apache Echarts 自学笔记 7. 概念篇 - 【数据集】 7.5 维度（dimension）
谢谢你们的关注
02-27 688
Apache Echarts 自学笔记 7. 概念篇 - 【数据集】 7.5 维度（dimension）
ECharts 数据可视化 入门基本知识 下载安装常用的图表 【1】
最新发布
weixin_43483590的博客
08-13 2122
ECharts一个基于 JavaScript 的开源可视化图表库，即将数据以图形或图像的方式展现成在屏幕上显示出来，这种方式称为数据可视化。数据可视化有助于我们分析数据，帮助我们更深入更直观的理解数据
浅谈echarts图表的dataset
weixin_43572973的博客
11-13 2865
背景 刚开始用echarts时，看案例中的数据跟我们平时用到的数据总是感觉不太致，数据处理起来也比较麻烦。 参考： https://echarts.apache.org/zh/tutorial.html 利用dataset属性，配置图表，使图表的数据为统一的key-value模式，用法如下： dataset有两个特别重要的属性 source: 数据源，是一个数组； dimensions: 指定了维度的顺序，简而言之就是你要取得字段， 案例1： 饼状图 dataset: { dimensions:
笔记 echart高级应用
heartandwater的博客
08-20 617
多坐标轴 这里的多指的的值多个x轴或者y轴，需要多坐标的原因一般就是需要不同的刻度， 将yAxis设为数组，每个元素的设置和单坐标轴一样，然后在series里指定yAxisIndex以对应相应的y轴 yAxis:[ {max:50}, {}, ], series:[ { yAxisIndex:0 },
基于vue学习echart学习
11-15
以下是基于Vue学习Echart的步骤： 1. 首先需要在Vue项目中引入Echart。可以在终端中运行以下命令进行安装： ``` npm install echarts --save ``` 2. 在main.js中引入Echart，并将其挂载在Vue的原型上： ```...
echart:学习echart.js中的一些心得
04-04
在深入探讨ECharts.js的学习心得之前，我们先来理解一下ECharts是什么。ECharts是由百度开发的一款基于JavaScript的数据可视化库，它支持丰富的图形图表，如柱状图、折线图、饼图、散点图等，同时具备高度的可定制性...
echart实例echart实例
02-09
ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，精美的图表效果，便捷的配置项和API，以及优秀...同时，不断学习和探索ECharts的更多高级特性，将有助于提升数据展示的用户体验。
Echart-2.2.7学习
01-21
Echart是基于JavaScript的计算机图形库，是当前比较流行的可视化开发工具。
visualMap属性
ʚ菲菲的博客ɞ
09-30 2052
视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是： symbol: 图元的图形类别。 symbolSize: 图元的大小。 color: 图元的颜色。 colorAlpha: 图元的颜色的透明度。 opacity: 图元以及其附属物（如文字标签）的透明度。 colorLightness: 颜色的明暗度。 colorSaturation: 颜色的饱和度。 colorHue: 颜色的色调。 visualMap=[ { show:true,
【HZHE004】黄子涵学习Echarts
黄子涵
03-27 1153
概念篇 数据集 数据集（dataset）是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据，但是从 ECharts4 支持 数据集 开始，更推荐使用 数据集 来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。 在系列中设置数据 如果数据设置在 系列（series）中，例如： 实例代码 <!DOCTYPE html> <html lang="zh">
echarts多次使用SetOption时的数据问题
我的博客
03-28 2299
使用myChart.setOption(option，true); 没有什么用 解决 在 myChart.setOption()前添加 myChart.clear(); myChart.setOption(option); 或者 myChart.dispose(); //销毁 myChart.setOption(option);
（2）基于Echarts插件的多维数据可视化设计和实现
之毅的博客
09-06 8434
本文针对多维离散数据和多维连续数据，利用Echarts插件构建多维可视化图表。主要涉及Echarts接口扩展和新增，以及数据的处理、包装、合并等。由于离散和连续图表展示的效果差别大，故多维图表的可视化，分为两大部分进行设计和实现。总体设计思想：主要是采用类似树形图结合柱状图、线图、散点图、面积图。
Echarts学习之十五：visualMap
热门推荐
剑雪封喉
06-20 5万+
visualMap=[ //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。 // colorAlpha...
ECharts官方教程(十二)【自定义系列】
极客神殿
12-19 2万+
自定义系列自定义系列（custom series），是一种系列的类型。它把绘制图形元素这一步留给开发者去做，从而开发者能在坐标系中自由绘制出自己需要的图表。echarts 为什么会要支持 自定义系列 呢？echarts 内置支持的图表类型是最常见的图表类型，但是图表类型是难于穷举的，有很多小众的需求 echarts 并不能内置的支持。那么就需要提供一种方式来让开发者自己扩展。另一方面，所提供的扩展方
echarts折线图分段用不同颜色显示
a_leading的博客
09-08 4万+
之前在用echarts做折线图的时候，需要一条线段根据某个条件用两种颜色显示。在网上找到的解决方案都是series.data用两组数据模拟，由于我的数据是动态加载的，所以这种方法并不怎么可取，因此我就去官方文档找看有没有相关的配置项（先百度再找官方文档实在不是什么好的习惯，尤其是官方文档还是中文的），果然，在官网上看到一个这样的实例：点击查看，发现是visualMap的作用，当然官网上的这个效果也是
echarsty轴刻度显示整数， minInterval
qq_52685664的博客
06-24 2387
minInterval：1 yAxis: { type: 'value', minInterval: 1 }, var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值