真实接口配置饼图饼图
export default{
data() {
return {
lineList: {},
};
},
props: {
reportsList: {
type: Object,
default: () => {
return {
title: {
text: "饼图",
},
grid: {
width: "50%",
height: "50%",
},
tooltip: {},
xAxis: {
show: false,
// data: ['衬衫', '羊毛衫', '羊毛衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {
show: false,
},
series: [
{
name: "销量",
type: "pie",
// 饼图的大小设置
radius: "45%",
// data: [5, 20, 36, 10, 10, 20]
data: [
{
value: 5,
name: "衬衫",
},
{
value: 20,
name: "羊毛衫",
},
{
value: 36,
name: "羊毛衫",
},
{
value: 10,
name: "裤子",
},
{
value: 10,
name: "高跟鞋",
},
{
value: 20,
name: "袜子",
},
],
},
],
};
},
},
},
mounted() {
var myChart = echarts.init(this.$refs.main);
// 绘制图表
this.lineList = JSON.parse(JSON.stringify(this.reportsList));
console.log(this.lineList);
// 把图标改为饼图
this.lineList.series.forEach((r) => {
r.type = "pie";
});
this.lineList.title={
text:"华东数据饼图"
}
// 手摸上去的提示
// a表示系列名 br换行 b表示数据名 c表示数据值 d 表示所占的百分比
this.lineList.tooltip={
formatter:'{a}{b}<br>:{c}({d}%)'
}
// 把图裂的位置调整一下
this.lineList.legend.top='10%';
this.lineList.legend.left='0%';
/*只显示华东的图数据 */
this.lineList.series.splice(1);
/* 先把图例的数据都改成饼图 */
this.lineList.series[0].type = "pie";
/* 把图例中除了华东的图例都删除掉 */
this.lineList.legend.data.splice(1);
/* 拿到时间集合用来展示饼图的name值 */
let nameList = this.lineList.xAxis[0].data;
/* 拿到数据用来展示饼图的value值 */
let valueList = this.lineList.series[0].data;
let newArr = [];
nameList.forEach((r, i) => {
let obj = {
name: r,
// 因为两个数组的长度是一样的 所以索引对应的值也是一样的key和value值也是一样
value: valueList[i],
};
// 把组装好的对象赛道新数组中
newArr.push(obj);
});
// 给华东的数据组装好格式化重新赋值 为了展示饼图对应的名字
this.lineList.series[0].data = newArr;
// 给饼图中心的圆心设置半径和圆的大小
this.lineList.series[0].radius = ["10%", "65%"];
// 设置饼图上下左右的大小
this.lineList.series[0].center = ["60%", "60%"];
// 把圆的形状改为玫瑰
this.lineList.series[0].roseType = "area";
// 给圆设置圆角
this.lineList.series[0].itemStyle = {
borderRadius: 5,
};
// 把x轴隐藏
this.lineList.xAxis = {
show: false,
};
this.lineList.yAxis = {
show: false,
};
myChart.setOption(this.lineList);
window.PieChart = myChart;
},
};
</script>
<style scoped lang='scss'>
#main {
height: 300px;
}
</style>
中国地图
export default {
name: "ChinaChart",
mounted() {
/* 定义一个随机函数生成数据 */
function randomValue() {
/* Math.round() 四舍五入成整数 */
/* 生成0-100的随机数整数 */
return Math.round(Math.random() * 100);
}
/* 定义了各个省市的数据 */
var dataList = [
{ name: "南海诸岛", value: 0 },
{ name: "北京", value: randomValue() },
{ name: "天津", value: randomValue() },
{ name: "上海", value: randomValue() },
{ name: "重庆", value: randomValue() },
{ name: "河北", value: randomValue() },
{ name: "河南", value: randomValue() },
{ name: "云南", value: randomValue() },
{ name: "辽宁", value: randomValue() },
{ name: "黑龙江", value: randomValue() },
{ name: "湖南", value: randomValue() },
{ name: "安徽", value: randomValue() },
{ name: "山东", value: randomValue() },
{ name: "新疆", value: randomValue() },
{ name: "江苏", value: randomValue() },
{ name: "浙江", value: randomValue() },
{ name: "江西", value: randomValue() },
{ name: "湖北", value: randomValue() },
{ name: "广西", value: randomValue() },
{ name: "甘肃", value: randomValue() },
{ name: "山西", value: randomValue() },
{ name: "内蒙古", value: randomValue() },
{ name: "陕西", value: randomValue() },
{ name: "吉林", value: randomValue() },
{ name: "福建", value: randomValue() },
{ name: "贵州", value: randomValue() },
{ name: "广东", value: randomValue() },
{ name: "青海", value: randomValue() },
{ name: "西藏", value: randomValue() },
{ name: "四川", value: randomValue() },
{ name: "宁夏", value: randomValue() },
{ name: "海南", value: randomValue() },
{ name: "台湾", value: randomValue() },
{ name: "香港", value: randomValue() },
{ name: "澳门", value: randomValue() },
];
let ChinaChart = echarts.init(this.$refs.ChinaChart);
let options = {
/* 提示框组件 */
tooltip: {
formatter: function (params) {
console.log(params)
/* params.seriesName 系列名 在series对象中name属性中定义 */
/* params.name 数据名称 是series对象中data数组中对象的属性*/
/* params.value 数据值 是series对象中data数组中对象的值*/
return (
params.seriesName + " : " + params.name + " -- " + params.value
);
},
},
// visualMap: {
// min: 0,
// max: 1500,
// left: 50,
// bottom: 20,
// text: ['高','低'],
// inRange: {
// color: ['#e0ffff', '#006edd']
// },
// show:true
// },
/* 地图的图例组件 */
visualMap: {
show: true,
x: 10,
y: 20,
splitList: [
{ start: 70, end: 80 },
{ start: 60, end: 70 },
{ start: 50, end: 60 },
{ start: 40, end: 50 },
{ start: 30, end: 40 },
{ start: 20, end: 30 },
{ start: 10, end: 20 },
{ start: 0, end: 10 },
],
color: [
"#5475f5",
"#9feaa5",
"yellow",
"#74e2ca",
"#e6ac53",
"#9fb5ea",
"#FEF5DC",
],
},
/* 地图的配置项 */
geo: {
map: "china",
/* 控制缩放和拖拽 */
roam: true,
/* 按比例放大缩小 */
zoom: 1,
/* 地图上面的文字 */
label: {
normal: {
show: true,
fontSize: "12",
color: "rgba(0,0,0,0.7)",
},
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
},
emphasis: {
areaColor: "red",
shadowOffsetX: 10,
shadowOffsetY: 10,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
/* 地图的数据 */
series: [
{
name: "新冠确诊人数",
type: "map",
geoIndex: 0,
/* 把省份数据塞到data中 */
data: dataList,
},
],
};
ChinaChart.setOption(options);
window.ChinaChart = ChinaChart;
},
};
</script>
<style>
</style>```
