今天遇到一个功能，就是绘制折线图，我之前是有写过的，但是之前是在引入的vue.js的项目中使用的，因此当时也是直接下载echarts.js，然后src引入后使用的。

今天的项目是vue-cli搭建的项目，因此最好还是通过npm install echarts --save的方式来下载插件，并引入插件来使用。

下载插件的时候，一定要注意要指定echarts的版本号，因此最新版的echarts与vue2.0有冲突，我今天就吃了这个亏。

安装插件后，在main.js中挂载到vue原型上后，在页面中使用时，一直提示我init of undefined，也就是说echarts根本没有。。。

最后通过大神的链接，找到了答案：

大神解决echarts出现init of undefined报错的问题：https://blog.csdn.net/lwh156541064/article/details/110660837

先说下具体步骤：

1.安装echarts插件——不要安装最新版本，要指定版本

npm install echarts@4.8.0 --save

如果npm失败，则可以使用cnpm试一下

cnpm install echarts@4.8.0 --save

2.在main.js中挂载到vue原型上——先引入，再挂载

//main.js中的内容
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

3.在其他页面使用——先有div容器，在初始化赋值操作

html部分代码：

<div id="lineId" style="width:100%;height:200px;padding:5px 10px;box-sizing:border-box;margin-top:6px;"></div>

需要注意一点，初始化echarts元素最好是在获取到数据之后进行操作：
data中初始化options

data(){
	return{
		optionLine: {
        title: {
          text: "中国精铜价格(元/每吨)",
          textStyle: {
            fontSize: 14,//修改标题的字号
          },
        },
        grid: {//此处改变折现区域与坐标轴之间的间距，不能紧靠着
          x: 40,
          y: 45,
          x2: 20,
          y2: 20,
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisLabel: {
            textStyle: {
              fontSize: 10,//修改刻度值的字号大小
            },
          },
          axisTick: {
            show: false,//刻度线是否显示
          },
          axisLine: {
            lineStyle: {
              color: "#A4A4A4",//x轴平行的网格线颜色
            },
          },
          data: [],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            interval: "auto",
            textStyle: {
              fontSize: 10,//y轴刻度值的字号大小
            },
          },
          axisLine: {
            show: false,//y轴刻度线是否展示
          },
          axisTick: {
            show: false,//y轴网格线是否展示
          },
        },
        legend: {
          data: ["铜"],
          right: "right",
          icon: "line",//图例图标的样式，可以是圆形  方形  矩形
          textStyle: {
            fontSize: 12,
            color: "#f90",//图例文字的字号和颜色
          },
        },
        series: [
          {
            name: "铜",
            type: "line",
            stack: "价格",
            data: [],
            symbol: "circle", //修改交叉点样式
            symbolSize: 6, //修改交叉点大小
            label: {
              show: false,//点击交叉点后是否有弹窗展示内容
              position: "right",
              textStyle: {
                fontSize: 10,
              },
            },
            itemStyle: {
              normal: {
                color: "#f90",//交叉点的颜色
              },
            },
            lineStyle: {
              color: "#f90",//线条颜色
            },
          },
        ],
      },
    };
	}
}

drawLine(id) {
  this.$api
    .getLineData({
      top: homeShop.top,
      RawMaterialDataType: homeShop.Rawmaterialtype,
    })
    .then((res) => {
      var data = res.data;
      this.charts = this.$echarts.init(document.getElementById(id));
      for (var i = 0; i < data.length; i++) {
        this.optionLine.xAxis.data.push(data[i].valueTime);
        this.optionLine.series[0].data.push(data[i].value);
      }
      this.charts.setOption(this.optionLine);
    });
},