目录
前言
一、数据清洗
1.去除重复值
2.处理缺失值
3.处理异常值
二、数据处理（将数据打包成绘制需要的格式）
1.条形图数据处理
2.折线图数据处理
3.玫瑰图数据处理
4.柱状图数据处理
5.词云图数据处理
6.饼图数据处理
三、绘制小图
1.轮播条形图
2.折线图
3.玫瑰图
4.柱状图
5.词云图
6.饼图
四、合并大屏
五、大屏展示
前言
当今社会，数据已经成为了我们最重要的资产之一。每一个领域都有着大量的数据，而对于企业来说，如何更好地利用这些数据就显得尤为关键。数据可视化是将数据转化为图形的过程，使得数据的本质更加清晰、易于理解。数据可视化大屏就是一个将数据可视化展示在大屏幕上的工具，可以帮助企业快速掌握数据的状态和趋势，更好地进行决策。
本次数据可视化大屏数据来自数据分析：10个领域的70+数据集，你都知道嘛？ - 知乎 ()
一、数据清洗
1.去除重复值
本次所需的数据来着两个表，因为过程大差不差，所以只展示一个表格的清洗过程。
导入数据表格：
使用序列对象的内置方法--drop_duplicates()来进行重复值处理，其中drop_duplicates()方法的参数即用法：
1）subset：当重对象是表格对象时使用，用来指定去重依据的字段
2）keep：指定去重后保留的行，first表示第一行，last表示最后一行
3）inplace：表示是否对原始数据生效（是否保留在原表）
具体代码如下：
2.处理缺失值
思路：用表格对象,isnull().sum()方法查看每列缺失值的数量，用dropna()方法将缺失值删除
3.处理异常值
画箱线图找出异常值
然后将异常值删除并索引重置保存到原表中，最后将清洗好的表格导出
二、数据处理（将数据打包成绘制需要的格式）
在使用 Echarts 进行数据可视化的开发中，数据处理是非常重要的环节。我们需要将不同的数据源整理成 Echarts 所要求的数据格式，才能将其绘制出来。
1.条形图数据处理
由于现在数据表中update_time列不是时间对象，所以要先转换成时间对象后再进行数据处理，用pd.to_datetime()方法进行转换并在表格中新建一列date存放，代码如下：
筛选出11月11日的数据并按店名分组对comment_count列求和，分组用到的方法是groupby(by="字段名")。将分组求和出来的数据按店名，评论数存到一个字典对象中
2.折线图数据处理
3.玫瑰图数据处理
4.柱状图数据处理
5.词云图数据处理
用jieba对标题列进行分词分词性后统计名词出现的次数后打包成字典格式
6.饼图数据处理
将价格分箱后对每个区间的频数统计
三、绘制小图
1.轮播条形图
条形图是在柱状图的基础上把x轴和y轴的类型和数据交换
设置轮播显示的核心代码是在dataZoom配置项中
yAxisIndex: 0 //从y轴的0刻度开始
startValue: 0 // 从头开始
endValue: 7 // 一次性展示9个
设置autoMove ()函数，来轮流播放
//轮播条形图，11-11日每个店铺的评论总数var left1Chart = echarts.init(document.querySelector(".left1 .chart"));var left1Option = {//color: ["#2f89cf"],tooltip: {// 通过坐标轴来触发trigger: 'axis',axisPointer: {type: "shadow"}},legend: {right: "40%",// 修饰图例文字的颜色textStyle: {color: "rgba(255,255,255,.7)"}},grid: {left: "0%",top: "10px",right: "0%",bottom: "4%",containLabel: true},xAxis:{type: 'value',name: '评论总数',position: 'top', //x轴位置axisTick: {show: false},axisLabel: { // 坐标轴标签show: true,fontSize: 12,fontFamily: 'Source Han Sans CN',fontWeight: 400,color: '#70EEFE',},axisLine: { // 坐标轴线设置show: false,lineStyle:{color:'#FFFFFF',},},splitLine: { // 分割线lineStyle: {color: '#0099FF',type: 'dashed',}},axisLabel: { // 改变x轴字体颜色和大小textStyle: {//color: "#33CCFF",fontSize: 10}}},yAxis:{type: 'category',//name: '店名',textStyle:{fontSize:10},axisLine: { // 坐标轴线show: false,lineStyle:{color:'#FFFFFF',},},axisTick: { // 坐标轴刻度show: false},axisLabel:{//interval: 0, //显示所有标签fontSize: 10, //标签大小//color: "#FFFFFF" , //设置标签颜色},data: ["佰草集", "倩碧", "兰芝", "兰蔻", "妮维雅", "娇兰", "悦诗风吟", "欧珀莱", "欧莱雅", "相宜本草", "美加净", "美宝莲", "自然堂", "薇姿", "蜜丝佛陀", "资生堂", "雅漾", "雅诗兰黛", "雪花秀"],},dataZoom: [//滑动条{yAxisIndex: 0, //从y轴的0刻度开始show: false, //是否显示滑动条type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件startValue: 0, // 从头开始。endValue: 7, // 一次性展示9个。},],series:[{type: 'bar',itemStyle: {borderColor: '#157DFE',borderWidth: 1,barBorderRadius: 30, //设置成圆角color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{offset: 1,color: `#FFFFFF`}, {offset: 0,color: `#3399FF`}]),},label: {normal: {show: true,position: 'right',formatter: '{c}条',color: '#3399FF',fontSize: '10',}},data: [115615.0, 73301.0, 74104.0, 29173.0, 366445.0, 1700.0, 573201.0, 41262.0, 216656.0, 188838.0, 72142.0, 291430.0, 191807.0, 20522.0, 74672.0, 2319.0, 108427.0, 57418.0, 4171.0],}]};left1Chart.setOption(left1Option);autoMove()function autoMove () {// 自动滚动：timeOut=setInterval(()=>{if (left1Option.dataZoom[0].endValue == 18 ) {left1Option.dataZoom[0].endValue = 7;left1Option.dataZoom[0].startValue = 0;} else {left1Option.dataZoom[0].endValue = left1Option.dataZoom[0].endValue + 1;left1Option.dataZoom[0].startValue = left1Option.dataZoom[0].startValue + 1;}left1Chart.setOption(left1Option);left1Chart.on('mouseover',stop)left1Chart.on('mouseout',goMove)},2000)}//停止滚动function stop(){clearInterval(timeOut)}//继续滚动function goMove(){autoMove()}
2.折线图
设置多个折线图时可以在series配置项中添加数据
//折线图var left2Chart = echarts.init(document.querySelector(".left2 .chart"));var left2Option = {tooltip: {// 通过坐标轴来触发trigger: "axis"},legend: {show: true,top: '2%',icon: "roundRect",itemWidth: 30, // 图例标记的图形宽度。itemHeight: 2, // 图例标记的图形高度。textStyle: {color: 'break',fontSize: 11,padding: [0, 8, 0, 8]}},grid: {top: "30%",left: "0%",right: "2%",bottom: "0%",show: true,borderColor: "#012f4a",containLabel: true},xAxis: {type: "category",boundaryGap: false,smooth: true, //平滑的曲线data: ["11-05","11-06","11-07", "11-08","11-09","11-10","11-11","11-12","11-13","11-14"],// 去除刻度axisTick: {show: false},// 修饰刻度标签的颜色axisLabel: {color: "rgba(255,255,255,.7)",interval: 0, //显示所有标签fontSize: 8, //标签大小},// 去除x坐标轴的颜色axisLine: {show: false,lineStyle:{color:'#FFFFFF',},}},yAxis: {type: "value",// 去除刻度axisTick: {show: false},// 修饰刻度标签的颜色axisLabel: {color: "rgba(255,255,255,.7)",fontSize: 8, //标签大小},// 修改y轴分割线的颜色splitLine: {lineStyle: {color: "#012f4a"}},// 去除x坐标轴的颜色axisLine: {show: false,lineStyle:{color:'#FFFFFF',},}},series: [{name: "佰草集",type: "line",// stack: "总量",smooth: true,data: [1437886,1439717,1446001,1438328,1448884,1451283,1750778,1488526,1440908,1652153]},{name: "倩碧",type: "line",// stack: "总量",smooth: true,data: [1014916,1016749,987563,978082,980249,996188,880736,770399,752341,753021]},{name: "兰蔻",type: "line",// 是否让线条圆滑显示smooth: true,data: [469012,473758,458931,463644,468765,483199,275733,4263,4858,4843]},{name: "妮维雅",type: "line",// 是否让线条圆滑显示smooth: true,data: [3972389,3979540,3476261,3993028,4000143,4045684,3913823,3638057,3615817,3619718]},{name: "兰芝",type: "line",// 是否让线条圆滑显示smooth: true,data: [1014916,1016749,987563,978082,980249,996188,880736,770399,752341,753021]},]};left2Chart.setOption(left2Option);
3.玫瑰图
由serise配置项中的radius属性来决定里面的圆的大小，
//南丁格尔图var left3Chart = echarts.init(document.querySelector(".left3 .chart"));const colorList = [{color1:'rgba(76,167,163,0.9)',color2:'rgba(90,255,223,1)'},{color1:'rgba(65,149,99,0.9)',color2:'rgba(115,255,145,1)'},{color1:'rgba(98,167,131,0.9)',color2:'rgba(153,255,179,1)'},{color1:'rgba(127,177,108,0.9)',color2:'rgba(193,255,138,1)'},{color1:'rgba(190,164,75,0.9)',color2:'rgba(255,207,74,1)'},{color1:'rgba(165,123,98,0.9)',color2:'rgba(254,178,128,1)'},{color1:'rgba(105,123,186,0.9)',color2:'rgba(151,176,255,1)'},{color1:'rgba(106,102,173,0.9)',color2:'rgba(164,151,255,1)'},{color1:'rgba(106,76,178,0.9)',color2:'rgba(159,110,254,1)'},{color1:'rgba(134,109,188,0.9)',color2:'rgba(180,143,241,1)'},{color1:'rgba(54,122,194,0.9)',color2:'rgba(76,174,254,1)'},{color1:'rgba(97,145,197,0.9)',color2:'rgba(131,199,255,1)'},];var left3Option = {tooltip: {trigger: "item",formatter: "{b}: {c} ({d}%)",},series: [{roseType: 'radius', //是否展示成南丁格尔图type: "pie",center: ["50%", "50%"],radius: ["10%", "80%"],color: ["#2a8aea", "#ff0000", "green", "#ff8080", "#7f3f00", "#ffcc00"],labelLine: { show: true },data: [{"name": "上海", "value": 788}, {"name": "深圳", "value": 487}, {"name": "北京", "value": 321}, {"name": "广州", "value": 262}, {"name": "杭州", "value": 248}, {"name": "苏州", "value": 105}, {"name": "南京", "value": 93}, {"name": "温州", "value": 89}, {"name": "青岛", "value": 72}, {"name": "成都", "value": 71}],label: { interval: 0, //显示所有标签normal: {show: true,orient:'horizontal', formatter: function (param) { //设置标签样式console.log(param)let style=''switch (param.name) {}return '{' + param.name + '}\n' + '{'+style + param.value + '个' +' | ' + param.percent + '%}';},textStyle: {fontSize: 10, fontStype:'oblique',color:"#FFFF"},},},itemStyle:{normal:{color(params){return colorList[parseInt(params.dataIndex/2)].color1;}}},z:3, }]};left3Chart.setOption(left3Option);
4.柱状图
轮播柱状图的设置与条形图的设置差不多，也是在dataZoom配置向中设置，在编写一个autoMove ()函数
//柱形图 每个店铺的销量var right3Chart = echarts.init(document.querySelector(".right3 .chart"));var right3Option = {tooltip: {// 通过坐标轴来触发trigger: 'axis',},grid: {top : '30%',left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',name:'店名',data:["佰草集", "倩碧", "兰芝", "兰蔻", "妮维雅", "娇兰", "悦诗风吟", "欧珀莱", "欧莱雅", "相宜本草", "美加净", "美宝莲", "自然堂", "薇姿", "蜜丝佛陀", "资生堂", "雅漾", "雅诗兰黛", "雪花秀"],axisTick:{interval: 0},axisLabel:{interval: 0, //显示所有标签fontSize: 8, //标签大小color: "#FFFFFF" , //设置标签颜色},axisLine: { // 坐标轴线设置show: false,lineStyle:{color:'#FFFFFF',},},},yAxis: {type: 'value',name:'销量',splitLine:{show: false, //去除网格线},axisLabel:{fontSize: 8, //标签大小color:'#FFFFFF' , //设置标签颜色},axisLine: { // 坐标轴线设置show: false,lineStyle:{color:'#FFFFFF',},},},dataZoom:[{//realtime: true,xAxisIndex:0, //从x轴的0刻度开始show:false, //是否显示滑动条type:"slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件//borderColor:"#3399FF", //边框颜色satartValue:0, //从头开始endValue:9, //一次展示九个}],series: [{data: [14994464.0, 7214560.0, 9130244.0, 3107006.0, 38254460.0, 181628.0, 39070496.0, 3950972.0, 33773155.0, 65462947.0, 8825906.0, 39358088.0, 17837452.0, 880090.0, 15391247.0, 351221.0, 6047851.0, 5361138.0, 703631.0],type: 'bar',// borderColor: '#157DFE',// barBorderRadius: 30, //设置成圆角color:'#6699FF',barWidth: '70%',// barGap:'80%', //设置柱子之间的间距label:{show: true,//positio: 'insideTop',position:'top', fontSize: 9,color: '#FFF' }} ],}right3Chart.setOption(right3Option);autoMove()function autoMove () {// 自动滚动：timeOut=setInterval(()=>{if (right3Option.dataZoom[0].endValue == 18 ) {right3Option.dataZoom[0].endValue = 7;right3Option.dataZoom[0].startValue = 0;} else {right3Option.dataZoom[0].endValue = right3Option.dataZoom[0].endValue + 1;right3Option.dataZoom[0].startValue = right3Option.dataZoom[0].startValue + 1;}right3Chart.setOption(right3Option);right3Chart.on('mouseover',stop)right3Chart.on('mouseout',goMove)},2000)}//停止滚动function stop(){clearInterval(timeOut)}//继续滚动function goMove(){autoMove()}
5.词云图
绘制词云图时，以防词云图出不来在导入依赖的js文件时要先导入echarts.js文件再导入echarts-wordcloud.min.js
//词云图var right1Chart = echarts.init(document.querySelector(".right1 .chart"));var right1Option = {tooltip: { //提示框backgroundColor: "#fff", axisPointer: {type: "none"},textStyle: { //字体样式color: "#565656",lineHeight: 28},padding: 12, extraCssText: "box-shadow: 0px 2px 8px 0px #cacaca;border-radius: 4px;opacity: 0.9;",},legend: {// 距离容器10%right: "8%",// 修饰图例文字的颜色textStyle: {color: "rgba(255,255,255,.7)"},itemHeight : 10},grid: {top : '30%',left: '3%',right: '4%',bottom: '3%',containLabel: true},series:[{type: "wordCloud", //设置类型为词云图shape: "circle", //形状为圆形left: "center", top: "center", //容器左边和上边的距离width: "80%",height: "80%", //sizeRange: [9,65], //词云的文字字号范围//rotationRange: [0,0], //词云中文字的角度，设置为[0,0]时不转gridSize: 16, //词云中每个词的间距drawOutOfBound: false, //是否允许词云在边界外渲染textStyle: {normal: {color: function () {return 'rgb(' + [Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160)].join(',') + ')';},fontFamily: 'sans-serif',fontWeight: 'normal',},emphasis: {shadowBlur: 10,shadowColor: '#333'},fontSize:10,},data: [{"name": "水", "value": 14933}, {"name": "霜", "value": 5143}, {"name": "精华", "value": 4179}, {"name": "套装", "value": 4148}, {"name": "诗", "value": 3021}, {"name": "面", "value": 2787}, {"name": "正品", "value": 2490}, {"name": "男士", "value": 2188}, {"name": "奶", "value": 1747}, {"name": "官方", "value": 1285}, {"name": "肤色", "value": 984}, {"name": "粉", "value": 946}, {"name": "手", "value": 937}, {"name": "眼", "value": 913}, {"name": "油", "value": 816}, {"name": "蜜", "value": 816}, {"name": "化妆品", "value": 788}, {"name": "面部", "value": 711}, {"name": "专柜", "value": 674}, {"name": "睫毛", "value": 626}, {"name": "泡沫", "value": 604}, {"name": "石榴", "value": 598}, {"name": "店", "value": 558}, {"name": "雪花", "value": 553}, {"name": "女士", "value": 534}, {"name": "饼", "value": 531}, {"name": "草", "value": 527}, {"name": "活", "value": 499}, {"name": "气垫", "value": 458}, {"name": "防晒霜", "value": 445}, {"name": "绿茶", "value": 418}, {"name": "茶", "value": 413}, {"name": "皱", "value": 412}, {"name": "眼圈", "value": 384}, {"name": "男女", "value": 382}, {"name": "温泉", "value": 366}, {"name": "量", "value": 358}, {"name": "瓶", "value": 356}, {"name": "香水", "value": 312}, {"name": "工具", "value": 310}, {"name": "玫瑰", "value": 308}, {"name": "身体", "value": 297}, {"name": "自然美", "value": 290}, {"name": "腮", "value": 270}, {"name": "品牌", "value": 263}, {"name": "团", "value": 263}, {"name": "泥", "value": 260}, {"name": "笔", "value": 259}, {"name": "青春", "value": 257}, {"name": "水面", "value": 256}, {"name": "版", "value": 251}, {"name": "活力", "value": 243}, {"name": "火山", "value": 241}, {"name": "时光", "value": 241}, {"name": "礼", "value": 228}, {"name": "丝", "value": 203}, {"name": "水光", "value": 202}, {"name": "力", "value": 199}, {"name": "全身", "value": 198}, {"name": "皱纹", "value": 197}, {"name": "雪域", "value": 196}, {"name": "经典", "value": 190}, {"name": "兰花", "value": 183}, {"name": "脸部", "value": 181}, {"name": "物质", "value": 178}, {"name": "雪", "value": 174}, {"name": "冰", "value": 164}, {"name": "山", "value": 160}, {"name": "两用", "value": 155}, {"name": "明星", "value": 149}, {"name": "货", "value": 146}, {"name": "橄榄油", "value": 146}, {"name": "生机", "value": 146}, {"name": "矿", "value": 144}, {"name": "花", "value": 140}, {"name": "系列", "value": 140}, {"name": "酒精", "value": 136}, {"name": "翠竹", "value": 136}, {"name": "蜂蜜", "value": 135}, {"name": "理想", "value": 134}, {"name": "珍珠", "value": 132}, {"name": "天才", "value": 131}, {"name": "液体", "value": 128}, {"name": "白面", "value": 127}, {"name": "森林", "value": 124}, {"name": "自然", "value": 120}, {"name": "部", "value": 115}, {"name": "葡萄", "value": 114}, {"name": "脸", "value": 102}, {"name": "心机", "value": 102}, {"name": "紫外线", "value": 101}, {"name": "长卷", "value": 101}, {"name": "口", "value": 98}, {"name": "豆", "value": 96}, {"name": "儿童", "value": 96}, {"name": "甲", "value": 94}, {"name": "草野", "value": 92}, {"name": "汗", "value": 90}, {"name": "牡丹", "value": 90}, {"name": "风姿", "value": 89}, {"name": "人", "value": 89}, {"name": "头", "value": 89}, {"name": "组", "value": 87}, {"name": "全球", "value": 85}, {"name": "原液", "value": 84}, {"name": "黑色", "value": 82}, {"name": "太极", "value": 82}, {"name": "胶", "value": 81}, {"name": "国货", "value": 81}, {"name": "造型", "value": 80}, {"name": "植物", "value": 80}, {"name": "时尚", "value": 80}, {"name": "弹性", "value": 78}, {"name": "款", "value": 76}, {"name": "梦幻", "value": 75}, {"name": "皮", "value": 75}, {"name": "包", "value": 74}, {"name": "气", "value": 74}, {"name": "生堂", "value": 74}, {"name": "州", "value": 72}, {"name": "深度", "value": 70}, {"name": "科研", "value": 70}, {"name": "能量", "value": 70}, {"name": "杏仁", "value": 69}, {"name": "酸", "value": 68}, {"name": "轮廓", "value": 66}, {"name": "花草", "value": 65}, {"name": "号", "value": 65}, {"name": "质地", "value": 64}, {"name": "赠品", "value": 62}, {"name": "玉", "value": 59}, {"name": "大牌", "value": 59}, {"name": "电", "value": 59}, {"name": "油脂", "value": 58}, {"name": "苹果", "value": 58}, {"name": "光泽", "value": 58}, {"name": "雾", "value": 58}, {"name": "专业", "value": 57}, {"name": "奇迹", "value": 56}, {"name": "基础", "value": 56}, {"name": "磁场", "value": 55}, {"name": "猫", "value": 55}, {"name": "宝", "value": 54}, {"name": "国", "value": 53}, {"name": "油菜", "value": 52}, {"name": "蜡笔", "value": 52}, {"name": "纱", "value": 51}, {"name": "都市", "value": 50}, {"name": "新生", "value": 50}, {"name": "魔术", "value": 50}, {"name": "大地", "value": 50}, {"name": "莲子", "value": 50}, {"name": "耳", "value": 50}, {"name": "空气", "value": 49}, {"name": "球", "value": 49}, {"name": "碧水", "value": 48}, {"name": "花香", "value": 48}, {"name": "海", "value": 47}, {"name": "海盐", "value": 46}, {"name": "氨基酸", "value": 45}, {"name": "情", "value": 43}, {"name": "金箔", "value": 43}, {"name": "帝王", "value": 43}, {"name": "女神", "value": 43}, {"name": "顾客", "value": 43}, {"name": "水分", "value": 42}, {"name": "眼睫毛", "value": 42}, {"name": "密码", "value": 40}, {"name": "巨星", "value": 40}, {"name": "染发剂", "value": 40}, {"name": "皮肤", "value": 39}, {"name": "白色", "value": 39}, {"name": "光彩", "value": 38}, {"name": "白霜", "value": 38}, {"name": "魅力", "value": 38}, {"name": "声", "value": 37}, {"name": "黑金", "value": 37}, {"name": "光学", "value": 35}, {"name": "油矿", "value": 34}, {"name": "固体", "value": 34}, {"name": "焕", "value": 34}, {"name": "半价", "value": 33}, {"name": "武士", "value": 32}, {"name": "宝贝", "value": 32}, {"name": "王牌", "value": 32}, {"name": "色泽", "value": 31}, {"name": "家庭", "value": 31}, {"name": "双唇", "value": 30}, {"name": "柔性", "value": 30}, {"name": "熊猫", "value": 30}, {"name": "阴影", "value": 30}, {"name": "星光", "value": 30}, {"name": "水晶", "value": 30}, {"name": "白发", "value": 30}, {"name": "梦", "value": 30}, {"name": "黄金", "value": 30}, {"name": "秀发", "value": 29}, {"name": "核桃", "value": 28}, {"name": "质感", "value": 28}, {"name": "光", "value": 27}, {"name": "双手", "value": 26}, {"name": "纸", "value": 26}, {"name": "花瓣", "value": 26}, {"name": "城市", "value": 26}, {"name": "大师", "value": 26}, {"name": "产品", "value": 26}, {"name": "牛奶", "value": 26}, {"name": "桃花", "value": 26}, {"name": "草莓", "value": 25}, {"name": "银杏", "value": 25}, {"name": "精灵", "value": 24}, {"name": "姨妈", "value": 24}, {"name": "大陆", "value": 23}, {"name": "价", "value": 23}, {"name": "樱桃", "value": 23}, {"name": "水温", "value": 23}, {"name": "蚕", "value": 22}, {"name": "挚爱", "value": 22}, {"name": "包装", "value": 22}, {"name": "宝石", "value": 22}, {"name": "水肿", "value": 20}, {"name": "云朵", "value": 20}, {"name": "干粉", "value": 20}, {"name": "黑豆", "value": 20}, {"name": "法令", "value": 20}, {"name": "颈部", "value": 20}, {"name": "泡", "value": 20}, {"name": "学者", "value": 20}, {"name": "风暴", "value": 20}, {"name": "全日", "value": 20}, {"name": "液态", "value": 20}, {"name": "营养", "value": 20}, {"name": "花纹", "value": 20}, {"name": "焦点", "value": 20}, {"name": "功效", "value": 20}, {"name": "色彩", "value": 20}, {"name": "大号", "value": 20}, {"name": "绿色", "value": 20}, {"name": "椰子", "value": 20}, {"name": "香", "value": 20}, {"name": "香味", "value": 20}, {"name": "圆形", "value": 20}, {"name": "烟", "value": 20}, {"name": "实效", "value": 19}, {"name": "因子", "value": 19}, {"name": "多效", "value": 19}, {"name": "白日", "value": 19}, {"name": "露水", "value": 18}, {"name": "心眼", "value": 17}, {"name": "魄力", "value": 17}, {"name": "纤维", "value": 17}, {"name": "线", "value": 17}, {"name": "指甲", "value": 17}, {"name": "生物", "value": 17}, {"name": "容量", "value": 17}, {"name": "月", "value": 17}, {"name": "面面", "value": 17}, {"name": "根源", "value": 16}, {"name": "乳粉", "value": 16}, {"name": "匀", "value": 16}, {"name": "劲", "value": 16}, {"name": "宝宝", "value": 16}, {"name": "会员", "value": 16}, {"name": "枸杞", "value": 16}, {"name": "日夜", "value": 16}, {"name": "旅", "value": 16}, {"name": "变色龙", "value": 16}, {"name": "家族", "value": 16}, {"name": "玉兰", "value": 16}, {"name": "浆", "value": 16}, {"name": "鹰", "value": 16}, {"name": "彩云", "value": 16}, {"name": "强力", "value": 16}, {"name": "科技", "value": 16}, {"name": "烈日", "value": 16}, {"name": "画眉", "value": 16}, {"name": "疤痕", "value": 16}, {"name": "魔力", "value": 16}, {"name": "护肤品", "value": 15}, {"name": "层", "value": 15}, {"name": "红色", "value": 15}, {"name": "海洋", "value": 15}, {"name": "金色", "value": 14}, {"name": "搭档", "value": 14}, {"name": "享年", "value": 13}, {"name": "角", "value": 13}, {"name": "芳草", "value": 13}, {"name": "规格", "value": 13}, {"name": "娃娃", "value": 13}, {"name": "天使", "value": 13}, {"name": "胶囊", "value": 13}, {"name": "粉丝", "value": 12}, {"name": "国家", "value": 12}, {"name": "卡", "value": 12}, {"name": "博物馆", "value": 12}, {"name": "字", "value": 12}, {"name": "芙蓉", "value": 12}, {"name": "天", "value": 12}, {"name": "礼品", "value": 11}, {"name": "7g", "value": 10}, {"name": "基层", "value": 10}, {"name": "妮", "value": 10}, {"name": "彩虹", "value": 10}, {"name": "30ml", "value": 10}, {"name": "中性", "value": 10}, {"name": "印章", "value": 10}, {"name": "乳液", "value": 10}, {"name": "家", "value": 10}, {"name": "区", "value": 10}, {"name": "亮色", "value": 10}, {"name": "人群", "value": 10}, {"name": "冷霜", "value": 10}, {"name": "佛手", "value": 10}, {"name": "屋", "value": 10}, {"name": "头皮", "value": 10}, {"name": "光子", "value": 10}, {"name": "典礼", "value": 10}, {"name": "奥秘", "value": 10}, {"name": "泵", "value": 10}, {"name": "灰色", "value": 10}, {"name": "猴子", "value": 10}, {"name": "画家", "value": 10}, {"name": "男人", "value": 10}, {"name": "电影", "value": 10}, {"name": "用途", "value": 10}, {"name": "酒", "value": 10}, {"name": "金刚", "value": 10}, {"name": "钻石", "value": 10}, {"name": "水滴", "value": 10}, {"name": "铜", "value": 10}, {"name": "菌", "value": 10}, {"name": "湿饰", "value": 10}, {"name": "清香", "value": 10}, {"name": "深海", "value": 10}, {"name": "颜色", "value": 10}, {"name": "白粉", "value": 10}, {"name": "眼睛", "value": 10}, {"name": "眼霜", "value": 10}, {"name": "碱", "value": 10}, {"name": "积分", "value": 10}, {"name": "积雪", "value": 10}, {"name": "负担", "value": 10}, {"name": "粉色", "value": 10}, {"name": "设计师", "value": 10}, {"name": "紧致", "value": 10}, {"name": "纹理", "value": 10}, {"name": "蘑菇", "value": 10}, {"name": "组合", "value": 10}, {"name": "绿洲", "value": 10}, {"name": "胡须", "value": 10}, {"name": "芒果", "value": 10}, {"name": "荔枝", "value": 10}, {"name": "沙", "value": 10}, {"name": "葫芦", "value": 10}, {"name": "水源", "value": 10}, {"name": "树木", "value": 10}, {"name": "控油", "value": 10}, {"name": "搪瓷", "value": 10}, {"name": "斑痕", "value": 10}, {"name": "新人", "value": 10}, {"name": "日月", "value": 10}, {"name": "骄阳", "value": 10}, {"name": "马拉松", "value": 10}, {"name": "香料", "value": 10}, {"name": "星空", "value": 10}, {"name": "风", "value": 10}, {"name": "材料", "value": 10}, {"name": "果木", "value": 10}, {"name": "柔情", "value": 10}, {"name": "风尚", "value": 10}, {"name": "毛巾", "value": 10}, {"name": "橘红色", "value": 10}, {"name": "棉花", "value": 10}, {"name": "气质", "value": 10}, {"name": "殿堂", "value": 10}, {"name": "铅笔", "value": 9}, {"name": "全家福", "value": 9}, {"name": "凝脂", "value": 9}, {"name": "肌", "value": 9}, {"name": "鱼", "value": 9}, {"name": "法", "value": 9}, {"name": "元素", "value": 9}, {"name": "泥水", "value": 9}, {"name": "125ml", "value": 9}, {"name": "瑕疵", "value": 9}, {"name": "栀子", "value": 9}, {"name": "智慧", "value": 9}, {"name": "泡泡", "value": 8}, {"name": "冰川", "value": 8}, {"name": "丹参", "value": 8}, {"name": "薄纱", "value": 7}, {"name": "花果", "value": 7}, {"name": "芬芳", "value": 7}, {"name": "打底", "value": 7}, {"name": "保质期", "value": 7}, {"name": "动力", "value": 7}, {"name": "拉面", "value": 7}, {"name": "肌肤", "value": 7}, {"name": "全套", "value": 7}, {"name": "女人", "value": 7}, {"name": "配方", "value": 7}, {"name": "乳", "value": 7}, {"name": "糖果", "value": 7}, {"name": "水库", "value": 7}, {"name": "云雾", "value": 7}, {"name": "杨洋", "value": 7}, {"name": "星球", "value": 7}, {"name": "彩笔", "value": 7}, {"name": "元气", "value": 7}, {"name": "污垢", "value": 7}, {"name": "珍藏版", "value": 7}, {"name": "鲜肉", "value": 6}, {"name": "人力", "value": 6}, {"name": "质量", "value": 6}, {"name": "韧", "value": 6}, {"name": "丰润型", "value": 6}, {"name": "鸡", "value": 6}, {"name": "手套", "value": 6}, {"name": "菊花", "value": 6}, {"name": "物理", "value": 6}, {"name": "芳香", "value": 6}, {"name": "特长", "value": 6}, {"name": "大叔", "value": 6}, {"name": "潮", "value": 6}, {"name": "油彩", "value": 6}, {"name": "水性", "value": 6}, {"name": "树", "value": 6}, {"name": "晚会", "value": 6}, {"name": "时空", "value": 6}, {"name": "研究所", "value": 6}, {"name": "笔芯", "value": 6}, {"name": "粗细", "value": 6}, {"name": "线条", "value": 6}, {"name": "干部", "value": 6}, {"name": "大奖", "value": 6}, {"name": "山泉水", "value": 5}, {"name": "日用", "value": 5}, {"name": "丽人", "value": 5}, {"name": "引擎", "value": 5}, {"name": "手心", "value": 5}, {"name": "铁塔", "value": 5}, {"name": "咖啡馆", "value": 5}, {"name": "部落", "value": 5}, {"name": "冰晶", "value": 5}, {"name": "百合花", "value": 5}, {"name": "塑型", "value": 5}, {"name": "花茎", "value": 4}, {"name": "局部", "value": 4}, {"name": "个性", "value": 4}, {"name": "痕迹", "value": 4}, {"name": "价值", "value": 4}, {"name": "玫瑰红", "value": 4}, {"name": "雪润", "value": 3}, {"name": "嘴唇", "value": 3}, {"name": "蒲公英", "value": 3}, {"name": "清爽", "value": 3}, {"name": "礼金", "value": 2}, {"name": "套餐", "value": 1}, {"name": "人生", "value": 1}],}],};right1Chart.setOption(right1Option);
6.饼图
//饼图var right2Chart = echarts.init(document.querySelector(".right2 .chart"));var right2Option = {tooltip: {trigger: 'item',axisPointer: {type: 'shadow',}},toolbox: {show: true,},legend: {show:true,width:26,right:'0%',top:'0%',color:"#FFF",align: "left", //图例在字的左边或右边【left/right】orient: "vertical", //图例方向icon: "circle", //图例形状textStyle: {color:'#FFF',rich: {name: {color: "#595959",fontSize: 14,width: 100,fontWeight: 600,},value: {color: "#595959",fontSize: 14,width: 100,fontWeight: 600,},},},},// grid: {// top : '30%',// left: '3%',// right: '4%',// bottom: '3%',// containLabel: true// },series: [{name: '价格区间分布',type: 'pie',radius: [0, 90], left:'2px',top:"20px",//roseType: 'area',itemStyle: {normal:{color:function(colors){ //配置饼图的颜色let colorList = ['#94c8d8','#f9bcbd','#a4c196','#ea5e51','#dec5ac','#aed9d8',];return colorList[colors.dataIndex];}},},label: {normal: {show: true, //color:"#FFF",position: "inside", //饼图扇区内部。'outside'饼图扇区内部。formatter: "{d}%", //{a}：系列名。{b}：数据名。{c}：数据值。{d}：百分比。},},// labelLine: {// show: true,// },data:[{"name": "(0, 80]", "value": 1186}, {"name": "(80, 100]", "value": 1006}, {"name": "(100, 150]", "value": 816}, {"name": "(150, 250]", "value": 505}, {"name": "(250, 600]", "value": 187}, {"name": "(600, 2200]", "value": 127}]}]};right2Chart.setOption(right2Option);
四、合并大屏
将绘制的每个小图按照id添加到html盒子中
