vue中使用echarts

昨天用了echarts，忘了写了。今天补上。

这是echarts的官网文档：https://echarts.baidu.com/

这个是v-echarts的官方文档（刚开始觉得这个比较简单，后来发现上面也挺好用的）：https://v-charts.js.org/#/

按需引入：https://github.com/ecomfe/echarts/blob/master/index.js

1、第一步当然是要先安装了

npm install --save echarts

2、安装完了。要开始使用了。 

在需要用的组件中引入。具体嘛：看------->

// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/line");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/radar");
require("echarts/lib/chart/pie");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

(因为我用到的组件不多，所以使用的是按需引入。毕竟全部引入体积太大了。哈哈哈~~)

3、html里面写

<div id="myChart1" :style="{width: '500px', height: '500px'}"></div>

4、在methods中定义一个方法 

drawLine9() {
      var myChart = echarts.init(document.getElementById("myChart"));
      myChart.setOption({
        title: {
          text: "从个人、班级、年级三方面对比,准确展示学生的成绩水平",
          left: "center",
          top: "bottom",
          x: 'center',
          textStyle: {
            fontSize: 12,
            fontWeight: "normal",
            lineHeight: 20
          }
        },
        tooltip: {},
        legend: {
          itemWidth: 15,
          itemHeight: 2,
          width: 15,
          data: ["年级", "班级", "个人"],
          orient: "vertical",
          left: "left",
          selectedMode: true
        },
        radar: {
          splitNumber: 7,
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          nameGap: "7",
          indicator: [
            { name: "语文", max: 100 },
            { name: "数学", max: 100 },
            { name: "体育", max: 100 },
            { name: "音乐", max: 100 },
            { name: "思想品德", max: 100 },
            { name: "美术", max: 100 },
            { name: "英语", max: 100 }
          ]
        },
        series: [
          {
            name: "年级 vs 班级 vs 个人",
            type: "radar",
            // center: ["50%", "50%"],
            // areaStyle: {normal: {}},
            data: [
              {
                value: [50, 40, 50, 60, 70, 80, 100],
                name: "年级"
              },
              {
                value: [30, 20, 80, 40, 90, 100, 50],
                name: "班级"
              },
              {
                value: [30, 10, 90, 40, 50, 90, 50],
                name: "个人"
              }
            ]
          }
        ]
      });
      window.onresize = myChart.resize;//让图表跟着窗口大小变化
    },

5、在mounted中调用这个方法

this.drawLine9() 

 关于这个里面的属性。。在网上能找到好多，就不写了。。这里有一个很全的：https://www.cnblogs.com/benmumu/p/8316652.html