1020 DigitalCity

1020

• 老师叫做的那两个作业比较难的话是扇形的划过出现那部分，和柱状图的右侧 Y 轴的字体部分。
• 点击修改数据 methods:{updated(){this.fruits=[]}}

1. 李明云杭州
2. 只写一个 option 然后 series 里面写数组共存两个图表( pie bar )
3. 还不懂 mounted 这个函数是什么意思。
4. 数组存在一个问题:不能 [11,哈哈]，应该 [value:11,text:哈哈]
5. 用 map 数组映射:this.position.map(ele)生成一个新数组 ele,数组里放我们的职位 ele.city
6. 不建议 label 应该添加 Y 轴 要把刻度线去掉 yAxis[{}.{}] 就会出现两条 Y 轴，找轴的相关属性设置。axis 是刻度线 length:5 linestyle
7. 遇到什么不会的查文档就是了，如果文档没有的话就查百度肯定有。
8. params 拿到的就是每一个小柱子 params.dataIndex 是里面的一个属性 log 出来的
9. 回去要写简历 写成精通 ECharts element ui Swiper 等各种插件
10. grid 设置整个图形的大小(可以在网格上绘制折线图，柱状图，散点图（气泡图）。) legend 是图像的标签
11. 求和函数 reduce()
12. const newEle = (…ele) 拷贝一个数组
13. 任何一项都可以用数组去设置，写成数组的是就是设置多个。 name:‘是’
14. 标签里面的值有默认的
15. 模棱两可的时候就去试
16. 练习老师发的网站
17. 主要是 1. 配置项 2. 数据的处理(如果后台的数据不一样怎么办)
18. 后面的 30 分钟没有写好。
19. 开另外一个小节 vuex 写 vuex 第一天

<template>
  <div id="DigitalCity"></div>
</template>

<script>
// 把两个图放到一起展示
// 一、柱状图 1. 去官网粘结构 2. 定义data数组map映射  3. 写Y轴代替 label axis(轴)隐藏Y轴 坐标轴刻度线 字体颜色改变  6. 自定义颜色
// 二、扇形图 1.位置 center 大小 radius 2. value与name 的数据名称 3. 字体居中

// 引入 ECharts 主模块
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() {
    // 基于准备好的dom，初始化echarts实例
    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,
              // shadowColor:'green',
              // color:'red'
            },
          },
          // offset: 10, //偏移量
          axisLabel: {
            // rotate: "20",
            // color: "teal",
          },
        },
        // 第二轴
        {
          data: this.DataCity.map((item) => item.positionNum + " 职位"),
          offset:0,   // y 轴的偏移量
          axisLine: {
            // 轴线相关设置。
            show: false,
            lineStyle: {
              //轴线的样式设置。
              color: "teal",
            },
          },

          axisTick: {
            //  刻度线相关设置。
            show: false,
            length: 30,
            lineStyle: {
              //刻度线的样式设置。
              // shadowOffseY:30
              color: "red",
            },
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            color: "#666",
          },
        },
      ],
      series: [
        {
          type: "bar",
          barWidth: "60%",
          data: this.DataCity.map((ele) => ele.positionNum),
          itemStyle: {
            normal: {
              // 定义一个颜色函数
              color(params) {
                // console.log(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: {
            // 圆外边的线
            // show: false,
            // show: true,
          },
          label: {
            align: "center",
          },
          data: this.salarys,
        },
      ],
    });
  },
};
</script>

<style>
#DigitalCity {
  /* width: 600px; */
  height: 500px;
  /* border: 1px solid #000; */
}
</style>