1020
老师叫做的那两个作业比较难的话是扇形的划过出现那部分，和柱状图的右侧 Y 轴的字体部分。点击修改数据 methods:{updated(){this.fruits=[]}}
李明云杭州只写一个 option 然后 series 里面写数组共存两个图表( pie bar )还不懂 mounted 这个函数是什么意思。数组存在一个问题:不能 [11,哈哈]，应该 [value:11,text:哈哈]用 map 数组映射:this.position.map(ele)生成一个新数组 ele,数组里放我们的职位 ele.city不建议 label 应该添加 Y 轴 要把刻度线去掉 yAxis[{}.{}] 就会出现两条 Y 轴，找轴的相关属性设置。axis 是刻度线 length:5 linestyle遇到什么不会的查文档就是了，如果文档没有的话就查百度肯定有。params 拿到的就是每一个小柱子 params.dataIndex 是里面的一个属性 log 出来的回去要写简历 写成精通 ECharts element ui Swiper 等各种插件grid 设置整个图形的大小(可以在网格上绘制折线图，柱状图，散点图（气泡图）。) legend 是图像的标签求和函数 reduce()const newEle = (…ele) 拷贝一个数组任何一项都可以用数组去设置，写成数组的是就是设置多个。 name:‘是’标签里面的值有默认的模棱两可的时候就去试练习老师发的网站主要是 1. 配置项 2. 数据的处理(如果后台的数据不一样怎么办)后面的 30 分钟没有写好。开另外一个小节 vuex 写 vuex 第一天
<template>
<div id="DigitalCity"></div>
</template>
<script>
import echarts from "echarts/lib/echarts";
import "echarts/lib/chart/bar";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
export default {
name: "DigitalCity",
data() {
return {
DataCity: [
{ city: "杭州", positionNum: 855, word: "4k-6k" },
{ city: "长春", positionNum: 875, word: "6k-8k" },
{ city: "成都", positionNum: 941, word: "8k-10k" },
{ city: "武汉", positionNum: 1144, word: "10k-15k" },
{ city: "广州", positionNum: 1271, word: "15k-20k" },
{ city: "深圳", positionNum: 1690, word: "20k-25k" },
{ city: "北京", positionNum: 1792, word: "25k-30k" },
{ city: "上海", positionNum: 3603, word: "30k-40k" },
],
salarys: [
{ value: 100, name: "4K-6K" },
{ value: 150, name: "6K-8K" },
{ value: 200, name: "8K-10K" },
{ value: 250, name: "10K-15K" },
{ value: 300, name: "15K-20K" },
{ value: 350, name: "20K-30K" },
],
};
},
mounted() {
var myChart = echarts.init(document.getElementById("DigitalCity"));
myChart.setOption({
tooltip: {},
legend: {
orient: "vertical",
right: "5%",
top: "50%",
},
grid: [
{
width: "40%",
left: "3%",
containLabel: true,
},
],
xAxis: {
show: false,
},
yAxis: [
{
data: this.DataCity.map((item) => item.city),
axisTick: {
length: 5,
lineStyle: {
shadowOffsetX: 5,
},
},
axisLabel: {
},
},
{
data: this.DataCity.map((item) => item.positionNum + " 职位"),
offset:0,
axisLine: {
show: false,
lineStyle: {
color: "teal",
},
},
axisTick: {
show: false,
length: 30,
lineStyle: {
color: "red",
},
},
axisLabel: {
color: "#666",
},
},
],
series: [
{
type: "bar",
barWidth: "60%",
data: this.DataCity.map((ele) => ele.positionNum),
itemStyle: {
normal: {
color(params) {
const colorList = [
"#B5C334",
"#FCCE10",
"#E87C25",
"#27727B",
"#FE8463",
"#9BCA63",
"#FAD860",
"#F3A43B",
"#60C0DD",
"#D7504B",
"#C6E579",
"#F4E001",
"#F0805A",
"#26C0C0",
];
return colorList[params.dataIndex];
},
},
},
},
{
center: ["70%", "50%"],
name: "薪资待遇",
type: "pie",
radius: ["20%", "60%"],
avoidLabelOverlap: true,
labelLine: {
},
label: {
align: "center",
},
data: this.salarys,
},
],
});
},
};
</script>
<style>
#DigitalCity {
height: 500px;
}
</style>
