echarst学习（一）

引入

echarst主要就是option配置项的问题，如何在vue中使用呢？步骤如下所示：

1：npm install echarst --save 安装echarst

2：在main.js中引入 import * as echarts from 'echarts'

3：挂载到原型上 Vue.prototype.$echarts = echarts

4：在vue组件中写上一个有宽高的dom元素

<div ref="myChart" style="width: 100%; height: 520px" id="myChart"></div>
<div class="content"></div>

5：在script中获取到dom元素，初始化echarst，并且塞入到dom元素中

const myChart = this.$refs.myChart
const thisChart = this.$echarts.init(myChart)

6:在配置项中写入option：

 const option = {
          tooltip: {
            confine: true,
            enterable: true, //鼠标是否可以移动到tooltip区域内
          },
          legend: {
            // top : '96%',                    // 图例距离顶部边距
            textStyle: {
              coFlor: "#202124",
              fontWeight: "bold",
              fontSize: "14",
            },
            data: ["学生个人", "班级平均"],
          },

          calculable: true,
          color: ["#00CA90", "#4285F4"],
          radar: {
            name: {
              textStyle: {
                color: "#fff",
                backgroundColor: "#999",
                fontSize: "10",
                borderRadius: 3,
                padding: [3, 5],
              },
            },
            indicator: [
              { name: "出勤率", max: 1 },
              { name: "作业提交率", max: 1 },
              { name: "话题参与率", max: 1 },
              { name: "表现得星数", max: 1 },
              { name: "互动参与率", max: 1 },
            ],
            radius: 80,
          },
          series: [
            {
              type: "radar",
              data: [
                {
                  value: [0.85, 0.94, 0.24, 0.56, 0.23],
                  name: "学生个人",
                },
                {
                  value: [0.9, 0.85, 0.37, 0.85, 0.52],
                  name: "班级平均",
                },
              ],
            },
          ],
        };

7:将编写好的配置项写到echarst上 thisChart.setOption(option)

8：完整代码如下所示：

<template>
  <div>
    <div ref="myChart" style="width: 100%; height: 520px" id="myChart"></div>
    <div class="content"></div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
export default {
  name: "VueIndextwo",

  //   components: { ComponentName },

  // directives: { DirectiveName },

  data() {
    return {};
  },

  mounted() {
    //   console.log(this.$echarts);
    document.querySelector("#myChart").style.width = document.querySelector(".content").clientWidth;
    this.setMyEchart();
  },

  methods: {
    setMyEchart() {
      const myChart = this.$refs.myChart; //通过ref获取到DOM节点
    //   console.log(this.$refs.myChart);
      if (myChart) {
        const thisChart = this.$echarts.init(myChart); //利用原型调取Echarts的初始化方法
        const option = {
          tooltip: {
            confine: true,
            enterable: true, //鼠标是否可以移动到tooltip区域内
          },
          legend: {
            // top : '96%',                    // 图例距离顶部边距
            textStyle: {
              coFlor: "#202124",
              fontWeight: "bold",
              fontSize: "14",
            },
            data: ["学生个人", "班级平均"],
          },

          calculable: true,
          color: ["#00CA90", "#4285F4"],
          radar: {
            name: {
              textStyle: {
                color: "#fff",
                backgroundColor: "#999",
                fontSize: "10",
                borderRadius: 3,
                padding: [3, 5],
              },
            },
            indicator: [
              { name: "出勤率", max: 1 },
              { name: "作业提交率", max: 1 },
              { name: "话题参与率", max: 1 },
              { name: "表现得星数", max: 1 },
              { name: "互动参与率", max: 1 },
            ],
            radius: 80,
          },
          series: [
            {
              type: "radar",
              data: [
                {
                  value: [0.85, 0.94, 0.24, 0.56, 0.23],
                  name: "学生个人",
                },
                {
                  value: [0.9, 0.85, 0.37, 0.85, 0.52],
                  name: "班级平均",
                },
              ],
            },
          ],
        }; //这里是我配置好的一个雷达图，你可以复制到echart示例网查看效果
        // console.log(thisChart);
        thisChart.setOption(option); //将编写好的配置项挂载到Echarts上
        window.addEventListener("resize", function () {
          thisChart.resize(); //页面大小变化后Echarts也更改大小
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>