可视化Echarts 散点图、雷达图、折柱混合图的设置

最新推荐文章于 2024-07-24 23:00:08 发布

open_test01

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量849

点赞数 1

分类专栏：前端vue 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/dafsq/article/details/130264859

版权

前端vue 专栏收录该内容

20 篇文章 9 订阅

订阅专栏

散点图

雷达图

折柱混合图

散点图

散点图的基本设置

<template>
<div ref="ec" id="sec"></div>
</template>

<script>
import * as echarts from "echarts" //引用
export default {
    mounted(){
        let mc = echarts.init(this.$refs.ec) //初始化
        let option ={
            xAxis:{},

            yAxis:{},

            series:[
                {
                symbolSize:10, //设置散点大小
                data: [//数据
                    [9.0, 7.04],
                    [18.07, 4.33],
                    [3.0, 9.65],
                    [9.05, 8.23],
                    [18.0, 9.76],
                    [15.0, 7.56],
                    [23.4, 5.31],
                    [10.1, 7.47],
                    [16.0, 8.26],
                    [12.7, 3.53],
                    [9.35, 7.2],
                    [7.4, 8.2],
                    [3.07, 4.82],
                    [18.2, 6.83],
                    [2.02, 4.47],
                    [1.05, 3.33],
                    [4.05, 4.96]
            ],
                type:"scatter" //散点图：scatter

                }
            
            ]
        }
        //配置项绘制
        mc.setOption(option)
    }
}
</script>

<style>
#sec{
    width: 500px;
    height: 500px;
    border: 1px solid royalblue;
}
</style>

散点图的更多效果

样式与提示框效果

            tooltip:{}, //提示框组件

            series:[
                {
                symbolSize:10, //设置散点大小
                data: [//数据
                    [9.0, 7.04],
                    [18.07, 4.33],
                    [3.0, 9.65],
                    [9.05, 8.23],
                    [18.0, 9.76],
                    [15.0, 7.56],
                    [23.4, 5.31],
                    [10.1, 7.47],
                    [16.0, 8.26],
                    [12.7, 3.53],
                    [9.35, 7.2],
                    [7.4, 8.2],
                    [3.07, 4.82],
                    [18.2, 6.83],
                    [2.02, 4.47],
                    [1.05, 3.33],
                    [4.05, 4.96]
            ],
                type:"scatter", //散点图：scatter

                //图形样式
                color:{
                    //设置线性渐变
                    type:"linear",
                    //相当于在图形包围盒中的百分比
                    x:0,
                    y:0,
                    x2:0,
                    y2:1,
                    //设置渐变颜色
                    colorStops:[
                        {
                            offset:0,//设置偏移量
                            color:"red" //开始的颜色
                        },
                        {
                            offset:1,
                            color:"rgba(255,173,2)" //结束的颜色
                        }
                        
                    ]
                }

                }
            
            ]

雷达图

雷达图的基本设置

<template>
    <div ref="ec" id="sec"></div>
    </template>
    
    <script>
    import * as echarts from "echarts" //引用
    export default {
        mounted(){
            let mc = echarts.init(this.$refs.ec) //初始化
            let option = {
                title: {
                    text: "雷达图",
                },
                radar: [//雷达图坐标系组件，只适用于雷达图
                {
                    shape:"circle",//设置为圆形 默认雷达图为六边形
                        indicator: [//雷达图的指示器，用来指定雷达图中的多个变量（维度）
                        { name: "蔬菜", max: 6500 },
                        { name: "水果", max: 16000 },
                        { name: "熟食", max: 30000 },
                        { name: "数码", max: 38000 },
                        { name: "家电", max: 52000 },
                        { name: "日化", max: 25000 },
                        ]
                        },
                ],
                series: [
                    {
                    type: "radar", //雷达图
                    data: [
                    {
                    value: [4200, 3000, 20000, 35000, 50000, 18000],
                    name: "销量",
                    },
                    ],
                    }
                ]
            };
                // 3.设置图表绘制图表
                mc.setOption(option);
        }
    }
    </script>
    
    <style>
    #sec{
        width: 500px;
        height: 500px;
        border: 1px solid royalblue;
        margin: 0 auto;
    }
    </style>

雷达图的更多效果

雷达图图形样式

         radar: [//雷达图坐标系组件，只适用于雷达图
                {
                    shape:"circle",//设置为圆形 默认雷达图为六边形
                        indicator: [//雷达图的指示器，用来指定雷达图中的多个变量（维度）
                        { name: "蔬菜", max: 6500 },
                        { name: "水果", max: 16000 },
                        { name: "熟食", max: 30000 },
                        { name: "数码", max: 38000 },
                        { name: "家电", max: 52000 },
                        { name: "日化", max: 25000 },
                        ],
                        //设置雷达图的半径
                        radius:200,
                        //旋转内容 设置坐标系的起始角度
                        startAngle:180, //旋转180度
                        splitNumber:4, //设置内部层级
                        axisName:{
                            formatter:"{value}",//设置指示器 将value变量作为指示器名称
                            color:"pink" //设置指示器颜色
                        },
                        splitArea:{//设置分割区对象
                        areaStyle:{//设置分割区的样式
                            color:["#a75c4a","#a6f64a","#ac54ba","#486abc"],
                        }
                    }
                    }
                ],

雷达图线段和填充样式

series: [
                    {
                    type: "radar", //雷达图
                    data: [
                    {
                    value: [4200, 3000, 20000, 35000, 50000, 18000],
                    name: "销量",
                    areaStyle:{//样式填充
                        color:"rgba(255,255,150)"

                    }
                    },
                ],
                lineStyle:{
                    type:"dashed"//设置线段效果为虚线
                },
                
            }
        ]

折柱混合图

<template>
    <div ref="ec" id="ec"></div>
    </template>
     
    <script>
    import * as echarts from "echarts"; //引用echarts
     
    export default {
        mounted(){
            let mc = echarts.init(this.$refs.ec) //初始化echarts
            //设置echarts的数据
                //定义数据
            let xData = ["x1","x2","x3","x4"]
            let yData1 = [100,120,80,60];
            let yData2 = [80,110,150,70];
            let yData3 = [91,82,177,100];

            
            //设置echarts配置项
            let option = {
                title:{
                    text:"折柱混合图"
                },
                xAxis:{//配置x轴的参数
                    data: xData,//x轴类目
                    type:"category" //坐标轴类型 value数据轴 category类目轴
                },
                yAxis:{//y轴相关配置
                    type:"value",
                    formatter:"{value}"//设置指示器 将value变量作为指示器名称
                },
     
                series:[//系列 配置图表的类型
                    {
                        name:"柱形1",
                        type:"bar", //系列名：当前的系列类别 bar柱状图
                        data:yData1 //数据
                    },
                    {
                        name:"柱形2",
                        type:"bar", //系列名：当前的系列类别 bar柱状图
                        data:yData2 //数据
                    },
                    {
                        name:"折线",
                        type:"line",
                        data:yData3
                    }
                ]
            }
            //绘制图表
            mc.setOption(option)
     
        }
    }
    </script>
     
    <style>
    #ec{
        width: 500px;
        height: 500px;
        border: 1px solid red;
        margin: 0 auto;
    }
    </style>