npm install echarts --save
如果安装失败可以通过淘宝镜像进行安装依赖包
cnpm install echarts --save
引入后提示import有问题,需要将echarts版本降到5以下的,改为4.9.0之后显示没有问题了
将echart封装成组件:
chartLint.vue文件:
<template> <div class="echart" id="echart-line" :style="{float:'left', '100%', height: '230px'}"></div> </template> <script> import echarts from "echarts"; export default { methods:{ initChart(name,xData,yData) { let getchart = echarts.init(document.getElementById('echart-line')); var option = { tooltip: { trigger: 'axis' }, legend: { data: [name], bottom:'0%' }, grid: { //调整图表上下左右位置 top:'10%', left: '3%', right: '8%', bottom: '11%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: xData }, yAxis: { type: 'value' }, series: [ { name: name, type: 'line', stack: '总量', data: yData }, ] }; getchart.setOption(option); //随着屏幕大小调节图表 window.addEventListener("resize", () => { getchart.resize(); }); }, } } </script>
在需要的组件中引入即可:
<template> <div class="analysisTask"> <ChartLine ref="chart_line_one"/> </div> </template> <script> import ChartLine from './partChart/chartLine.vue' export default{ data(){ return{ name:'张雪', xData: ['2020-02', '2020-03', '2020-04', '2020-05'], yData: [30, 132, 80, 134], } }, mounted () { const {name,xData,yData} = this console.log(this.$refs) this.$refs.chart_line_one.initChart(name,xData,yData) }, components: { ChartLine, } } </script>