饼图渲染：
//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(this.$refs.main);
/* 深拷贝一下 生成两个不同的对象 */
this.lineList = JSON.parse(JSON.stringify(this.reportsList));
/* 展示标题 */
this.lineList.title = {
text: "华东饼图数据",
};
/* 展示提示框组件 */
this.lineList.tooltip = {
/* a表示系列名 <br/>表示换行 b表示数据名 c表示数据值 d表示所占的百分比 */
formatter: '{a} <br> {b} <br> {c} <br> ({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 data = [{
name:"2017-12-27",
value:2999
}] */
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%', '45%'];
/* 设置圆的上下左右的距离 */
this.lineList.series[0].center = ['58%', '60%'];
/* 把圆的形状设置成玫瑰形 */
this.lineList.series[0].roseType = 'area';
/* 给圆设置圆角 */
this.lineList.series[0].itemStyle = {
borderRadius: 5
}
/* 把x轴隐藏 */
this.lineList.xAxis = {
show:false
}
/* 把y轴隐藏 */
this.lineList.yAxis = {
show:false
}
// 绘制图表
myChart.setOption(this.lineList);
window.PieChart = myChart;
样式穿透 只针对于当前的页面 不会修改element的样式，当你需要修改组件的样式 直接使用组件的类名修改不了 这时候就需要使用样式穿透 样式穿透有两种方式 第一种是 自定义的父元素类名 >>> 组件的类名 使用了scss会失效 第二种是 自定义的父元素类名 /deep/ 组件的类名 这种不被scss兼容会报错
.reports >>> .el-card{
/* 这里使用auto无效必须使用inherit继承上一级的溢出样式 */
overflow:inherit!important;;
}
中国地图组件
/* 定义一个随机函数生成数据 */
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: {
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,
},
],
