EChart学习

最新推荐文章于 2023-04-05 22:19:53 发布

rainy-g

最新推荐文章于 2023-04-05 22:19:53 发布

阅读量1.4k

点赞数 2

分类专栏：框架学习

框架学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、接触EChart

1.柱状图

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

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

参考网站：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。

五、图表的交互组件

组件分为：

图例组件 legend
标题组件 title
视觉映射组件 visualMap
数据区域缩放组件 dataZoom
时间线组件 timeline

//描述：数据区域缩放组件：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

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
EChart学习

目录一、接触EChart1.柱状图1.1、引入：只需要像普通的 JavaScript 库一样用 script 标签引入。1.2、绘制简单表格2.饼图二、ECharts的样式1、颜色主题2、调色板3.直接样式设置3.1、高亮样式：emphasis4.视觉映射：通过visualMap组件设定样式三、异步获取数据和更新1、异步获取数据2、loadi...
复制链接

扫一扫

专栏目录