Vue项目中简单使用Echarts图表

echarts的官网示例：echarts.apache.org/examples/zh…

一、导入echarts文件

1）如果是在html中使用，使用script标签引入js文件；

2）脚手架项目中使用npm install echarts@4.9.0 --save/-S <指定版本是因为vue2版本安装新版本echarts会报一些异常>

二、在main.js文件中添加<以脚手架项目为例>

import echarts from "echarts";

Vue.prototype.$echarts = echarts;

三、在需要使用到echarts的vue文件或者js文件中使用echarts

将柱状图或者饼图的配置装配放到标签的方法中，在页面加载初始化过程中mounted钩子函数调用这些方法，继而页面生成

饼图：

 <template>
      <div>
          <div id="demo1" ref="demo1_ref"></div>
      </div>
  </template>

test1() {
    let pie_div = this.$refs.demo1_ref;//document.getElementById("demo1")会导致一些页面数据加载的问题
    var pie_chart = this.$echarts.init(pie_div);//echarts初始化
    var pie_option = {
        title:{//title文本
            text:'',
            subtext:'',
            left:'',//x/left: left/center/right
            top:30,  //y/top: top/center/bottom或者一些数字
            textStyle:{
                fontSize:16//设置title文字的大小
            }
        },
        tooltip:{//提示
            trigger:'item',
            formatter:function(params){//设置提示信息的格式与信息拼接
                console.log(params);//params.name,params.value,params.percent
                return htmlStr;//字段信息按需要格式拼接
            },
            position:['50%','50%']//显示提示的位置，数据为居中
        },
        legend:{//图例
            orient:'vertical',//图列的朝向 vertical/horizontal
            x:'right',
            y:'center',
            padding:[0,5,0,0], //内边距上，右，下，左
            itemGap:10 //图例之间的间距
        },
        series:[//需要动态显示的数据以及数据显示样式
            {
                name:'',
                type:'pie',//类型为饼图
                radius:'40%',//饼图的半径
                center:['42%','50%'],//设置饼图的位置，第一百分比表示左右，第二个表示上下
                //roseType:'angle',//显示成南丁格尔图
                label:{//设置饼图上直接显示的信息
                    normal:{
                        formatter:"{b},{c},{d}%",//b:name,c:value,d:percent
                        rich:{},
                        color:''//设置label的颜色，使其不显示默认颜色
                    }
                },
                data:[]//动态数据{name:'',value:''},
                emphasis:{//设置高亮
                    itemStyle:{
                        shadowBlur:10,
                        shadowOffsetX:0,
                        shadowColor:'rgba(0,0,0,0.5)'
                    }
                }
            }
        ]
    };
    var pie_chart.setOption(pie_option); 
}

柱状图：

<template>
    <div>
          <div id="demo2" ref="demo2_ref"></div>
    </div>
</template>

 test2() {
     let bar_div = this.$refs.demo2_ref;//document.getElementById("demo2")会导致一些页面数据加载的问题
     var bar_chart = this.$echarts.init(bar_div);//echarts初始化
     var bar_option = {
         title:{//title文本
             text:'',
             subtext:'',
             left:'',//x/left: left/center/right
             top:30,  //y/top: top/center/bottom或者一些数字
             textStyle:{
                 fontSize:16//设置title文字的大小
             }
         },
         tooltip:{//提示
             trigger:'item',//不设置其他属性的话，一切都按照默认的格式显示数据
             
         },
         dataZoom:[//数据区域缩放
             {
                 type:'slider'
             },
             {
                 type:'inside'
             },
         ],
         grid:{//图整体移动
             bottom:'30%',//图整体向上移动
             left:"15%'//图表整体向左移动
         },
         xAxis:{//x坐标
             name:'',//x轴信息
             type:'category',//类目轴
             axisLabel:{
                 show:true,
                 interval:0,//x轴标签明全部显示
                 formatter:function(val) {
                     return val.split("").join("\n");//标签名竖直显示
                 },
                 rotate:50//倾斜角
             },
             data:[]//x轴数据['','','','']
         },
         yAxis:{//y轴
             name:'',//y轴信息
             type:'value'//y轴类型-数值,
             axisLabel:{//y轴标签显示格式
                 formatter:function(value){
                     return value+".00";
                 }
             }
         },
         series:[//需要动态显示的数据以及数据显示样式
             {
                 data:[],//y轴数据['','','','']
                 type:'bar',//类型为柱状图
                 color:'',//柱状图的颜色
                 showBackground:true,//是否显示背景
                 backgroundStyle:{
                     color:'rgba(180,180,180,0.2)'//柱状图的背景色
                 }
             }
         ]
     };
     var bar_chart.setOption(bar_option); 
 }