Vue项目中使用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初体验

同一个页面里面 id 命名要是唯一的哦！！！

<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组件化（进阶写法）

同一个页面里面 id 命名要是唯一的哦！！！

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

ECharts图表子组件案例
son.vue

<template>
<div style="width:100%;height:100%;margin:0;">
  <!-- 这个id接收父页传进来的id，也就是动态接收-->
  <div :id="id style="width:100%;height:100%""></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));
      // 清空图表，重新渲染图表
      myChart.clear();

      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]
          }
        ]
      };

      // 调用setOption
      myChart.setOption(option)

      //建议加上以下这一行代码
      //不加的话,当浏览器窗口缩小的时候,样式会出现问题
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  }
};
</script>

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

father.vue

<template>
<div>
   <!-- 用v-if 保证图表初始赋值时能够正常显示内容-->
   <div v-if="SonData!==null" style="height: 231px;">
   <!-- 注意看我这边的id 接收的是静态的字符串字面量（表示不可更改）-->
     <Son :id="'Son'" :datas="SonData"></Son>
   </div>
</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>

参考文章
【1】Vue项目中使用echarts教程
https://blog.csdn.net/SatanDYG/article/details/115050822

【2】在vue中使用Echarts[官方5分钟上手ECharts]
https://www.cnblogs.com/ludeng-blog/p/12531903.html

【3】ECharts官网
https://echarts.apache.org/handbook/zh/basics/release-note/v5-upgrade-guide/