echarts 基础知识整理（文末送 7 个可视化大屏案例源码）

短命女 2022-08-29 06:18 183阅读 0赞

![fad6c897f58c95e660e1b1893ebc55e5.png][]

### 柱状图    ###

import echarts from 'echarts';
    let root = document.getElementById('root');
    let myCharts  = echarts.init(root);
    let options = {    xAxis:{        type:'category',        data:['red','yellow','pink'],    },    yAxis:{        type:'value',    },    series:[        {            name:'英语',            type:'bar',            data:[70,80,66]        }    ]}
    myCharts.setOption(options);

### 柱状图配置最大值最小值平均值 ###

import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {    xAxis:{        type:'category',        data:['张三','李四','王五','马六','小明','二妞','大强'],    },    yAxis:{        type:'value'    },    series:[        {               name:'语文',            type:'bar',            +markPoint:{                +data:[                    {                        type:'max',                        name:'最大值',                    },                    {                        type:'min',                        name:'最小值'                    }                ]            },            markLine:{                data:[                    {                        type:'average',                        name:'平均值',                    }                ]            },            data:[88,92,63,77,94,80,72,]        }   ]}myCharts.setOption(option);

![b3adbc08f513f3e2348e67041e38b452.png][]

### 柱状图 数值 柱宽度 显示设置 ###

![bb09ffaca14ada0e3ce64a120d71c1f5.png][]

### 通用配置title ###

import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {    title:{        text:'成绩展示',        textStyle:{            color:'pink',                   },        borderWidth:2,        borderColor:'blue',        borderRadius:5,        left:'50%',    },    xAxis:{        type:'category',        data:['张三','李四','王五','马六','小明','二妞','大强'],    },    yAxis:{        type:'value'    },    series:[        {               name:'语文',            type:'bar',            label:{                show:true,                position:'top',            },            barWidth:'40%',            data:[88,92,63,77,94,80,72,]        }    ]}myCharts.setOption(option);

![8e91342a08f3f99d27abc20a5d2e906a.png][]

### tooltip的通用配置 触发类型trigger,触发时机triggerOn格式化formatter ###

import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {    tooltip:{        // trigger:'item',        trigger:'item',        // triggerOn:'click',        formatter:(args) => {            return `${args.seriesName}的分数是${args.data}`;        }    },    xAxis:{        type:'category',        data:['张三','李四','王五','马六','小明','二妞','大强'],    },    yAxis:{        type:'value'    },    series:[        {               name:'语文',            type:'bar',            label:{                show:true,                position:'top',            },            barWidth:'40%',            data:[88,92,63,77,94,80,72,]        }    ]}myCharts.setOption(option);

![ea59948b13c90f3afcc8bc74a98f63c2.png][]

### toolbox工具栏配置 导出图片，动态类型，数据区域缩放 ###

import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {    toolbox:{        feature:{            saveAsImage:{ //导出图片                show:true,            },            dataView:{ //数据视图                show:true,            },            restore:{ //数据重置                show:true,            },            dataZoom:{//区域缩放                show:true,            },            magicType:{ //动态图表类形切换                type:['bar','line']            }
            }    },    xAxis:{        type:'category',        data:['张三','李四','王五','马六','小明','二妞','大强'],    },    yAxis:{        type:'value'    },    series:[        {               name:'语文',            type:'bar',            label:{                show:true,                position:'top',            },            barWidth:'40%',            data:[88,92,63,77,94,80,72,]        }    ]}myCharts.setOption(option);

![82342d80fd2d8d775ac66c0f4d741bba.png][]

### 通用配置legend ###

import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {        xAxis:{        type:'category',        data:['张三','李四','王五','马六','小明','二妞','大强'],    },    yAxis:{        type:'value'    },    legend:{        data:['语文','数学']    },    series:[        {               name:'语文',            type:'bar',            label:{                show:true,                position:'top',            },            barWidth:'40%',            data:[88,92,63,77,94,80,72,]        },        {            name:'数学',            type:'bar',            barWidth:'40%',            data:[88,22,44,77,94,80,72,]        }    ]}myCharts.setOption(option);

![3b6dc9ddc6425732333ca0e34173653e.png][]

### 基本折线图 ###

![20fb59545d41536f2c423b42f098a17c.png][]

### 折线图最大值，最小值，平均值，标注区间，线条，平滑，风格的设置 ###

import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);
    let option = {    xAxis:{        type:'category',        data:['一月','二月','三月','四月','五月'],    },    yAxis:{        type:'value'    },       series:[        {            type:'line',            data:[22,44,20,99,55],            markPoint:{                data:[                    {                        type:'max',                        name:'最大值'                    },                    {                        type:'min',                        name:'最小值'                    }                ]            },            markLine:{                data:[                    {                        type:'average',                    }                ]            },            smooth:true,            lineStyle:{                color:'yellow',                type:'dashed'            },            markArea:{                data:[                    [                        {                            xAxis:'一月'                        },                        {                            xAxis:'二月'                        }                ]                ]            }        }    ]};myCharts.setOption(option);

![e412a1a21ceec7843dd6cc12aac572c0.png][]

### grid基本配置 ###

import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);
    let option = {   //是否显示    grid:{        show:true,        borderWidth:5,        borderColor:'pink',    },    xAxis:{        type:'category',        data:['一月','二月','三月','四月','五月'],        boundaryGap:false,    },    yAxis:{        type:'value',        scale:true,    },       series:[        {            type:'line',            stack:'all',            data:[22,44,20,99,55],        },        {            type:'line',            stack:'all',            data:[55,66,88,22,10],        }    ]};myCharts.setOption(option);

![bcf05c091a58d82c9894a3f596972306.png][]

### 区域缩放器 ###

import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {    dataZoom:[        {            type:'slider',            //type:'inside',        }    ],    xAxis:{        type:'category',        data:['张三','李四','王五','马六','小明','二妞','大强'],    },    yAxis:{        type:'value'    },    series:[        {               name:'语文',            type:'bar',            label:{                show:true,                position:'top',            },            barWidth:'40%',            data:[88,92,63,77,94,80,72,]        }    ]}myCharts.setOption(option);

![3d4315c8f57944e0922e8a5b4b40637b.png][]

### 饼图的基本实现 ###

import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {   series:[       {            type:'pie',            data:[                {                    name:'京东',                    value:998                },                {                    name:'唯品会',                    value:2209                },                {                    name:'淘宝',                    value:2440                }            ]       }   ]}myCharts.setOption(option);

![88f338edc0b6423bc1b7b69daf8a92c2.png][]

### 显示数值的设置 ###

![c7588515b1021933b6272640b628141b.png][]

### 设置圆环 ###

![9f8ff0c4a7c57c244ae27193fda7219a.png][]

### 雷达图 ###

import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {  radar:{      indicator:[            {                name:'功能',                value:100            },            {                name:'拍照',                value:100,            },            {                name:'跑分',                value:100,            },            {                name:'续航',                value:100,            },            {                name:'易用性',                value:100            }        ]  },  series:[    {        type:'radar',        data:[            {                name:'华为手机',                value:[80,90,80,82,94],                type:'specified'            },            {                name:'中兴手机',                type:'specified',                value:[70,82,75,70,78]            }        ]
        }    ]}myCharts.setOption(option);

![2c5fb682e2e106aee7a18768891a287e.png][]

### 雷达图显示数值，区域面和，绘制类型的配置 ###

*  设置label显示数值
 *  设置areaStyle显示面积

import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {  radar:{    //   shape:'circle',      indicator:[            {                name:'功能',                value:100            },            {                name:'拍照',                value:100,            },            {                name:'跑分',                value:100,            },            {                name:'续航',                value:100,            },            {                name:'易用性',                value:100            }        ]  },  series:[    {        type:'radar',        label:{            show:true,        },        areaStyle:{
            },        data:[            {                name:'华为手机',                value:[80,90,80,82,94],                type:'specified'            },            {                name:'中兴手机',                type:'specified',                value:[70,82,75,70,78]            }        ]
        }    ]}myCharts.setOption(option);

![35f9853a29c97d77107f95ad65fd145b.png][]

### 仪表盘 ###

import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {  series:[{      type:'gauge',      data:[          {              value:97,
              }        ]  }]}myCharts.setOption(option);

![622ad2551080fffecd2b8301cf37febe.png][]

### 主题的使用 ###

*  两套主是分别是dark和light

import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root,'dark');let option = {  series:[{      type:'gauge',      data:[          {              value:97,
              }        ]  }]}myCharts.setOption(option);

![115e6bfa02d6da5b0ea321aa754bd29b.png][]

### 自适应 ###

import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);window.onresize = myCharts.resize;let option = {    color:['pink','pink','yellow'],    tooltip:{        // trigger:'item',        trigger:'item',        // triggerOn:'click',        formatter:(args) => {            return `${args.seriesName}的分数是${args.data}`;        }    },    xAxis:{        type:'category',        data:['张三','李四','王五','马六','小明','二妞','大强'],    },    yAxis:{        type:'value'    },    series:[        {               name:'语文',            type:'bar',            label:{                show:true,                position:'top',            },            barWidth:'40%',            data:[88,92,63,77,94,80,72,]        }    ]}myCharts.setOption(option);

### 绑定事件 ###

import echarts from 'echarts';let root = document.getElementById('root');let myCharts = echarts.init(root);let option = {    legend:{        data:['京东','唯品会','淘宝']    },    series:[        {                type:'pie',                data:[                    {                        name:'京东',                        value:998                    },                    {                        name:'唯品会',                        value:2209                    },                    {                        name:'淘宝',                        value:2440                    }                ]        }    ]}// myCharts.on('click',(ev) => {//     console.log('ev',ev);// });myCharts.on('legendselectchanged',(ev) => {    console.log('ev',ev);})myCharts.setOption(option);

> 转自：https://juejin.cn/post/6960109467505524766

### 7个可视化大屏案例展示 ###

以下为源码案例展示，如果你需要此源码，请关注“前端达人”公众号，回复“echarts”获取。

[fad6c897f58c95e660e1b1893ebc55e5.png]: /images/20220829/ffa5fa20f1154403882826598126ac0d.png
[b3adbc08f513f3e2348e67041e38b452.png]: /images/20220829/5f49ed6435e94a74825841458b9e80ad.png
[bb09ffaca14ada0e3ce64a120d71c1f5.png]: /images/20220829/b382eaf682784c5db7e3dcd2c8970909.png
[8e91342a08f3f99d27abc20a5d2e906a.png]: /images/20220829/f817167971f54b62bad4e7fcb39aacbb.png
[ea59948b13c90f3afcc8bc74a98f63c2.png]: /images/20220829/75b510a52a664cb38f6809409abd712d.png
[82342d80fd2d8d775ac66c0f4d741bba.png]: /images/20220829/43c1959250dc42569e901246ce64dcbb.png
[3b6dc9ddc6425732333ca0e34173653e.png]: /images/20220829/af563c82d3a7455db1421df0b5751678.png
[20fb59545d41536f2c423b42f098a17c.png]: /images/20220829/55e3e910e4e04011b7088d7bf89bcf5e.png
[e412a1a21ceec7843dd6cc12aac572c0.png]: /images/20220829/01ec619c4c644f619563d3a8583435d7.png
[bcf05c091a58d82c9894a3f596972306.png]: /images/20220829/e742af80936d4706849d5ef485e6937f.png
[3d4315c8f57944e0922e8a5b4b40637b.png]: /images/20220829/6b2c7686ee904bb391e4eda2630ab622.png
[88f338edc0b6423bc1b7b69daf8a92c2.png]: /images/20220829/9b368fed8a8a48a08a00cd8a6c6143e3.png
[c7588515b1021933b6272640b628141b.png]: /images/20220829/2c215191a771443ebdba00e158bb39f5.png
[9f8ff0c4a7c57c244ae27193fda7219a.png]: /images/20220829/01d6cfc76efe41fd811712baff4a6ba0.png
[2c5fb682e2e106aee7a18768891a287e.png]: /images/20220829/bc53edfdb7d44ea7aa87790123b37f37.png
[35f9853a29c97d77107f95ad65fd145b.png]: /images/20220829/3cf1c5b73c074b2987612b26a3df301a.png
[622ad2551080fffecd2b8301cf37febe.png]: /images/20220829/33668dcf9e76454880571815ec929a4e.png
[115e6bfa02d6da5b0ea321aa754bd29b.png]: /images/20220829/577f628db0fe421fb9a8f21be683bebf.png