Echart基本的图形配置及制作

最新推荐文章于 2024-04-02 15:54:12 发布

单箭头→

最新推荐文章于 2024-04-02 15:54:12 发布

阅读量567

点赞数 1

分类专栏： Echart 文章标签：前端

本文链接：https://blog.csdn.net/weixin_42498482/article/details/106566540

版权

Echart 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.引入echarts

· 直接html引入 src

· ES引入 import echarts from node_module/echarts/echarts

· 普通引入 var echarts = require(“echarts”);

2. js配置部分

1.  Echarts初始化并绑定容器
    var echarts = Echarts.init(document.getElementById('main'));
2.  option配置项
    var option = {
        title: {
            text: "Echarts 数据统计图表"
        },
        tooltip: {},
        legend: {
            name: "数据划分"    // 必须与下文的serise中的name保持一致
        },
        xAxis: {
            data: ["Android","IOS","PC","oPPer","mot","Ohter"]
        },
        yAxis: {
            
        },
        serise: [{
            name: "数据划分",
            type: "line", //  图表类型： treemap(树状图)，pie(饼状图)，bar(柱状图) 
            data：[500,200,360,100,10, 1000]  //y轴数据
        }]
    }
    
    // 上面的serise的data数组里是对象条的时候一般用于饼状图，显示区域名称
    Example: 
        data: [
            {value:500,name:'Android'},
            {value:200,name:'IOS'},
            {value:360,name:'PC'},
            {value:100,name:'Ohter'}
        ]
3.  Echarts调用配置项option
    echarts.setOption(option);

图形色块颜色设置，以饼状图为例：

1. 图块的整体设置
    var option = {
        serise: [{
            data: [
                { 
                    value:310, 
                    name:'邮件营销', 
                    itemStyle: {        // 图块设置，  normal可带可不带
                        normal: {
                            color: '#058f98',  // 颜色设置
                            shadowBlur: 100,   // shadow距离设置
                            shadowColor: ''    // 投影颜色设置
                        },
                    },
                    label: {            // 饼状图字体颜色设置未带normal
                        textStyle: {
                            color: '#058f98'
                        }
                    },
                    label: {            // 饼状图字体颜色设置带normal
                        normal: {
                            textStyle: {
                                color: '#058f98'
                            }
                        }
                    },
                    labelLine: {        // 饼状图对应色块线颜色设置
                        normal: {
                            lineStyle: {
                                color: '#058f98'
                            }
                        }
                    },
                    
                },
            ]
        }]
    }
    
2.当扇形（柱形其他型待测）的区块只有明暗度（颜色的深浅）的变化时，有一种更快捷的方式是通过 visualMap 组件将数值的大小映射到明暗度。
var option = {
    visualMap: {
        // 不显示 visualMap 组件，只用于明暗度的映射
        show: false,
        // 映射的最小值为 80 --> 指的是明暗度的值不是区块的值，下面600也是
        min: 80,
        // 映射的最大值为 600
        max: 600,
        inRange: {
            // 明暗度的范围是 0 到 1
            colorLightness: [0, 1]
        }
    }
}

Echart新引进的两套主题： light、dark

调用方式： Echart.init(dom, “light”);

Echarts 全局调色盘和局部调色盘：

全局调色盘指的是在option下直接添加color数组，图块区域会根据数组的的排序依次获取颜色，如果添加了系列自己专属的调色盘(局部颜色），也是color属性,系列自己的颜色高于全局原色；
所以图块的颜色可直接定义好添加在color属性中，然后让它自动去取；
在饼图中图块颜色文字和线以及对应字体颜色默认都是一一对应的，一般情况下不建议调

好看的颜色推荐：

color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],

给图块或文字添加高亮（高亮也就是鼠标经过的时候的颜色，也就是hover时的颜色），相关代码:

emphasis: {
    show: true,     // 定义标签文字高亮时会要此属性，图块高亮是此属性直接省略；
    color: "blue"
} 

1. 标签lable：
lable: {
    // 普通样式/正常样式
    normal: {
        show: true,
        formatter: 'This is a normal label.'
    },
    
    // 高亮样式
    emphasis: {
        show: true,
        formatter: "This is a emphasis label."   // 高亮时显示的文字
    } 
}

2.itemStyle: {
    // 普通样式
    normal: {
        color: 'red',
    },
    
    // 高亮样式
    emphasis: {
        color: "yellow"
    }
}

加载动画： loading

Echarts有自己内置的loading方法：showLoading() 和 hideLoading();

var echart = Echarts.init(dom);
echart.showLoading();     // 未绑定数据时调用   显示loading
echart.hideLoading();     // 绑定好数据后调用   隐藏loading

数据的动态更新 --> 产生动态图

ECharts 由数据驱动，数据的改变驱动图表展现的改变;

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

使用 dataset 管理数据

优点: 直观易理解，以及适于对一些特殊图表类型进行一定的数据类型定制。

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

option = {
    legend: {},
    tooltip: {},
    dataset: {
        // 提供一份数据。
        source: [
            ['product', '2015', '2016', '2017'],   //   这组后面的三个字符串相当于name代表不同bar图块
            ['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]
        ]
    },
    // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
    xAxis: {type: 'category'},
    // 声明一个 Y 轴，数值轴。
    yAxis: {},
    // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
}

或者也可以使用常见的对象数组的格式：

option = {
    legend: {},
    tooltip: {},
    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}
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {},
    series: [   
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
};

数据到图形的映射（encode）

var option = {
    dataset: {
        source: [
            ['score', 'amount', 'product'],  // 这一列对应它后面的每份数据，跟索引i相似
            [89.3, 58212, 'Matcha Latte'],
            [57.1, 78254, 'Milk Tea'],
            [74.4, 41032, 'Cheese Cocoa'],
            [50.1, 12755, 'Cheese Brownie'],
            [89.7, 20145, 'Matcha Cocoa'],
            [68.1, 79146, 'Tea'],
            [19.6, 91852, 'Orange Juice'],
            [10.6, 101852, 'Lemon Juice'],
            [32.7, 20112, 'Walnut Brownie']
        ]
    },
    xAxis: {},
    yAxis: {type: 'category'}, // type的定义直接决定图形的展现形式是横向还是竖向
    series: [
        {
            type: 'bar',
            encode: {
                // 将source中 "amount" 列对应的列映射到 X 轴。
                x: 'amount',  
                // 将将source中 "product" 列对应的列映射到 Y 轴。
                y: 'product'   // 决定渲染对应列的哪一项
            }
        }
    ]
};

// yAxis的type属性 + encode定位直接决定了图形的展现形式

按行还是按列做映射

用户可以使用 seriesLayoutBy 配置项，改变图表对于行列的理解。seriesLayoutBy 可取值：

(1) ‘column’: 默认值。系列被安放到 dataset 的列上面。

(2) ‘row’: 系列被安放到 dataset 的行上面。

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]
        ]
    },
    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'},
        {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}
    ]
}

维度（dimension）

demensions介绍：

当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。

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

var option1 = {
    dataset: {
        dimensions: [
            {name: 'score'},
            // 可以简写为 string，表示维度名。
            'amount',
            // 可以在 type 中指定维度类型。
            {name: 'product', type: 'ordinal'}
        ],
        source: [...]
    },
    ...
};

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

单箭头→

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echart基本的图形配置及制作

1.引入echarts· 直接html引入 src· ES引入 import echarts from node_module/echarts/echarts· 普通引入 var echarts = require(“echarts”);2. js配置部分1. Echarts初始化并绑定容器 var echarts = Echarts.init(document.getElementById('main'));2. option配置项 var option = {
复制链接

扫一扫

专栏目录