Echarts--Js可视化实现[视觉盛宴]--动态三维条形图、柱状图、饼图、比例图、折线图

1、前言

       ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。运用灵活。作图高端大气。今天来说一说如何用echarts作图。
若要运行或者自创代码请打开此链接，并且在下面图示中输入代码

2、案列（基于电影推荐系统）

2.1 观众年龄分配占比在这里插入代码片

option = {
   
    tooltip: {
   },// 加上该行，使得鼠标静止显示数据
    backgroundColor: '#000000',
    "grid": {
   
        "top": "10%",
        "left": "6%",
        "bottom": "10%",
        "right": "5%",
        "containLabel": true
    },
    title: {
        //图表标题
    text: "观众年龄分配占比",
    left: "center",
    bottom: "2%",
    textStyle: {
   
        color: "#fff",
        fontSize: 16
    }
    },
    xAxis: [{
   
        "type": "category",
        "data": ['(0,18)','[18,24)','[24,34)','[34,44)','[44,49)','[49,55)','[55,100)'], //这里需要加
        "axisTick": {
   
            "alignWithLabel": true
        },
        "nameTextStyle": {
   
            "color": "#82b0ec" //眼色属性
        },
        "axisLine": {
   
            "lineStyle": {
   
                "color": "#82b0ec"
            }
        },
        "axisLabel": {
   
            "textStyle": {
   
            "color": "#ffffff",
            fontSize: 14, //字体大小
            fontWeight:'bolder',//字体加粗
            }
        }
    }],
    "yAxis": [{
   
        "type": "value",
        "axisLabel": {
   
            "textStyle": {
   
                "color": "#ffffff"
            },
            "formatter": "{value}%"
        },
        "splitLine": {
   
            "lineStyle": {
   
                "color": "#0c2c5a",
                fontWeight:'bolder',//字体加粗
            }
        },
        "axisLine": {
   
            "show": false
        }
    }],
    "series": [{
   
            "name": "",
            type: 'pictorialBar',
            symbolSize: [60, 16],   //柱子上圈大小
            symbolOffset: [0, -10], //上圈高度
            symbolPosition: 'end',
            z: 12,
            //"barWidth": "20",
            "label": {
   
                "normal": {
   
                    "show": true,
                    "position": "top",
                    "formatter": "{c}%"
                }
            },
            "data": [{
       //第一个柱上的圆
                "value": 3.68,
                "itemStyle": {
   
                    "color": "#77ddff"
                }
            }, {
             //第二个柱上的圆
                "value": 18.26,
                "itemStyle": {
   
                    "color": "#5599ff"
                }
            },{
   
                "value": 34.7,
                "itemStyle": {
   
                    "color": "#0044bb"
                }
            },{
   
                "value": 19.75,
                "itemStyle": {
   
                    "color": "#0066ff"
                }
            },{
   
                "value": 9.11,
                "itemStyle": {
   
                    "color": "#77ddff"
                }
            },{
   
                "value": 8.21,
                "itemStyle": {
   
                    "color": "#77ddff"
                }
            },{
   
                "value": 6.29,
                "itemStyle": {
   
                    "color": "#77ddff"
                }
            }]
        },
        {
   
            name: '',
            type: 'pictorialBar',
            symbolSize: [60, 7],   //柱子下圈大小
            symbolOffset: [0, 5], //柱子下圈高度
            // "barWidth": "20",
            z: 12,
            "data": [{
        //第一个柱下的圆
                "value": 3.68,
                "itemStyle": {
   
                    "color": "#77ddff"
                }
            }, {
   
                "value": 18.26,
                "itemStyle": {
   
                    "color": "#5599ff"
                }
            },{
   
                "value": 34.7,
                "itemStyle": {