Vue项目中使用echarts教程

步骤
- npm 安装ECharts
- 引入 ECharts
- - 老版本引入方式（v4版本）
  - 新版本引入方式（v5版本）
- ECharts初体验
- ECharts组件化（进阶写法）

步骤

npm 安装ECharts

npm install echarts --save

引入 ECharts

（1）全局使用：在项目入口文件main.js中引入Echarts
（2）局部使用：就直接在所需要的页面中引入Echarts

老版本引入方式（v4版本）

//全部引入
import echarts from 'echarts';
// 或者按需引入
import echarts from 'echarts/lib/echarts';//以下函数,是用在在main.js里面的
//通过Vue.prototype 将echarts保存为全局变量，才能真正使用
Vue.prototype.$echarts = echarts

新版本引入方式（v5版本）

//全部引入
import * as echarts from 'echarts';
// 按需引入
import * as echarts from 'echarts/lib/echarts';//以下函数,是用在在main.js里面的
//通过Vue.prototype 将echarts保存为全局变量，才能真正使用
Vue.prototype.$echarts = echarts

ECharts初体验

<template><!-- 关键声明： id  和 width 和  height 都会影响图表的展示--><div id="demo" style="width: 500px;height:400px;"></div>
</template><script>export default {name: "HelloWord",mounted(){//进入页面就执行一次this.drawChart();},methods: {drawChart() {//2. 基于准备好的dom，初始化echarts实例//此处的意思就是，对 demo 元素 进行图表初始化的相关操作var myChart = this.$echarts.init(document.getElementById('demo'));//3. 指定图表的配置项和数据//该处就是图表内容，在官网的示例里面，要复制过来到项目里面的也是这一块内容var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {    //图例组件data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};//4.使用刚指定的配置项和数据显示图表。myChart.setOption(option);}},}
</script><style scoped></style>

ECharts组件化（进阶写法）

把需要图表vue页面，抽成子组件，供父组件使用，更加方便

ECharts图表子组件案例
son.vue

<template>
<div style="width:100%;height:100%;margin:0;"><!-- 这个id接收父页传进来的id，也就是动态接收--><div :id="id"></div>
</div></template><script>
//使用echarts局部引入的方式（我这边的版本是5版本）
import * as echarts from 'echarts';
export default {props:["id","datas"],//接收父页传入值data() {return {};},computed:{},watch:{},mounted() {_this= this;this.getChartData();},methods: {getChartData() {console.log("echar内部");console.log("父页传入的datas",this.datas);this.drawChart();},drawChart() {//初始化echarts实例let myChart = echarts.init(document.getElementById(this.id));let option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label:{color: '#ffffff'},crossStyle: {color: '#ffffff'}}},legend: {data: ['短信推送量', '站内消息量'],textStyle:{color: '#ffffff'//字体颜色},},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisPointer: {type: 'shadow'},axisLabel: {show: true,textStyle: {color: '#ffffff'}}}],yAxis: [{type: 'value',name: '短信推送量(条)',nameTextStyle:{color:"#ffffff",},min: 0,max: 250,interval: 50,axisLabel: {formatter: '{value} ',textStyle: {color: '#ffffff'}},splitLine :{    //网格线show:true, //隐藏或显示lineStyle:{type:'dotted'    //设置网格线类型 dotted：虚线   solid:实线},}},{type: 'value',name: '站内消息量(条)',nameTextStyle:{color:"#ffffff",},min: 0,max: 25,interval: 5,axisLabel: {formatter: '{value} ',textStyle: {color: '#ffffff'}},splitLine :{    //网格线show:true, //隐藏或显示lineStyle:{type:'dotted'    //设置网格线类型 dotted：虚线   solid:实线},}}],series: [{name: '短信推送量',type: 'bar',tooltip: {valueFormatter: function (value) {return value + ' 条';}},data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]},{name: '站内消息量',type: 'line',yAxisIndex: 1,tooltip: {valueFormatter: function (value) {return value + ' 条';}},data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]}]};// 调用setOptionmyChart.setOption(option)//建议加上以下这一行代码//不加的话,当浏览器窗口缩小的时候,样式会出现问题window.addEventListener("resize", function() {myChart.resize();});}}
};
</script>

父页（引用子组件的vue页面）

father.vue

<template><div><!-- 注意看我这边的id 接收的是静态的字符串字面量（表示不可更改）--><Son :id="'Son'" :datas="SonData"></Son></div>
</template><script>
//引入子组件
import Son from "./components/echarts/Son";export default {name: "father",data() {return {SonData: null,};},//import引入的组件需要注入到对象中才能使用components: {Son,},mounted(){},methods: {},    
}
</script><style scoped></style>