Echarts系列----基础使用

Echarts

• 柱状图 bar
• 折线图 lines
• 散点图 scatter/effectScatter
• 饼图 pie
• 地图 map
• 雷达图 radar
• 仪表盘图 gauge

柱状图

常见效果
标记：最大值 最小值 平均值
显示：数值显示 柱宽度 横向柱状图

  var xDataArr = ['张三','李四','王五','小猪']
    var yDataArr = [88,98,70,86]
        this.option1={
   
          
            //横向柱状图----将xAxis和yAxis调转
            yAxis:{
   
                type:'category',
                data:xDataArr
           },
           xAxis:{
   
                type:'value'
           },
            series:[
                {
   
                    name:'语文',
                    type:'bar',  
                    //最大值，最小值
                    markPoint:{
   
                        data:[
                            {
   type:'max',name:'最大值'},
                            {
   type:'min',name:'最小值'}
                        ]
                    },
                    //平均值
                    markLine:{
   
                        data:[
                            {
   
                                type:'average',
                                name:'平均值'
                            }
                        ]
                    },
                    //数值显示----将数据显示在图中
                    label:{
   
                        show:true,
                        rotate:60,//数据旋转
                        position:'inside', //在图表内部
                    },
                    //柱宽度
                    barWidth:35,
                    data:yDataArr
                },
            ]
        }

通用配置

• 标题 title
• 提示 tooltip
• 工具按钮 toolbox
• 图例 legend

通用配置title

• 文字样式
• 标题边框
• 标题位置

tooltip
tooltip:提示框组件，用于配置鼠标滑过或点击图标时的显示框

• 触发类型：trigger :item,axis
• 触发时机：triggerOn: mouseover,click
• 格式化：formatter
  字符串模板
  回调函数

toolbox
toolbox： Echarts提供的工具栏
增加feature功能
内置的功能：

• 导出图片
• 数据视图
• 动态类型切换
• 数据区域缩放
• 重置

legend
legend:图例，用于筛选系列，需要和series配合使用

• legend中的data是一个数组
• legend中的data的值需要和series数组中某数据的name值一致

效果图：

 var xDataArr = ['张三','李四','王五','小猪']
    var yDataArr1 = [88,98,70,86]
    var yDataArr2 = [82,68,98,76]
        this.option1={
   
            //标题
            title:{
   
                text:'成绩展示',
                //文字样式
                textStyle:{
   
                    color:'red'
                },
                //标题边框
                borderWidth:5,
                borderColor:'blue',
                barBorderRadius:5,
                //标题位置
                left:50,
                top:10
            },
            //提示框
            tooltip:{
   
                trigger:'axis', //触发类型---item鼠标移入柱内部，axis只要在这个轴上就可
                triggerOn:'click',//触发时机---默认鼠标滑动上去即可(mouseover),click点击才可
               // formatter:'{b}的成绩是{c}' 
               formatter:function(arg){
   
                   console.log(arg)
                   return arg[0].name + '的分数是：' + arg[0].data
               }

            },
            //toolbox--工具栏
            toolbox:{
   
                //添加功能节点
                feature:{
   
                    saveAsImage:{
   },//下载（导出）图片功能
                    dataView:{
   },//数据视图
                    restore:{
   }, //重置按钮
                    dataZoom:{
   },//区域缩放
                    //图表类型切换
                    magicType:{
   
                        type:['bar','line']
                    }//动态图标类型的切换

                }
            },
            legend:{
   
                data:['语文','数学']
            },
            //横向柱状图----将xAxis和yAxis调转
            xAxis:{
   
                type:'category',
                data:xDataArr
           },
           yAxis:{
   
                type:'value'
           },
            series:[
                {
   
                    name:'语文',
                    type:'bar',  
                    //最大值，最小值
                    markPoint:{
   
                        data:[
                            {
   type:'max',name:'最大值'},
                            {
   type:'min',name:'最小值'}
                        ]
                    },
                    //平均值
                    markLine:{
   
                        data:[
                            {
   
                                type:'average',
                                name:'平均值'
                            }
                        ]
                    },
                    //数值显示----将数据显示在图中
                    label:{
   
                        show:true,
                        rotate:60,//数据旋转
                        position:'inside', //在图表内部
                    },
                    //柱宽度
                    barWidth:35,
                    data:yDataArr1
                },
                {
   
                    name:'数学',
                    type:'bar',
                    data:yDataArr2
                }
            ]
        }

折线图

常见效果：

• 标记：最大值 最小值 平均值 标注区间
  -markPoint, markLine markArea

• 线