【echarts画数据可视化大屏】
目录
前言
一、数据清洗
1.去除重复值
2.处理缺失值
3.处理异常值
二、数据处理（将数据打包成绘制需要的格式）
1.条形图数据处理
2.折线图数据处理
3.玫瑰图数据处理
4.柱状图数据处理
5.词云图数据处理
6.饼图数据处理
三、绘制小图
1.轮播条形图
2.折线图
3.玫瑰图
4.柱状图
5.词云图
6.饼图
四、合并大屏
五、大屏展示
前言
当今社会，数据已经成为了我们最重要的资产之一。每一个领域都有着大量的数据，而对于企业来说，如何更好地利用这些数据就显得尤为关键。数据可视化是将数据转化为图形的过程，使得数据的本质更加清晰、易于理解。数据可视化大屏就是一个将数据可视化展示在大屏幕上的工具，可以帮助企业快速掌握数据的状态和趋势，更好地进行决策。
本次数据可视化大屏数据来自数据分析：10个领域的70+数据集，你都知道嘛？ - 知乎 (zhihu.com)
一、数据清洗
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存放，代码如下：
筛选出2016年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 ()函数，来轮流播放
//轮播条形图，2016年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盒子中
