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

柱状图

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);

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

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',            label:{                show:true,                position:'top',            },            barWidth:'40%',            data:[88,92,63,77,94,80,72,]        }    ]}myCharts.setOption(option);

通用配置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);

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);

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);

通用配置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);

基本折线图

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]        }    ]};myCharts.setOption(option);

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

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);

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);

区域缩放器

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);

饼图的基本实现

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);

显示数值的设置

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                }            ],            label:{                show:true,                formatter:(values) =>  {                    return `${values.name}所占百分比${(values.percent)+'%'}`                }            }       }   ]}myCharts.setOption(option);

设置圆环

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                }            ],            radius:['50%','75%']       }   ]}myCharts.setOption(option);

雷达图

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);

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

• 设置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);

仪表盘

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);

主题的使用

• 两套主是分别是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);

自适应

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”获取。