前端05vscode+Vue 引入 ECharts

前端05vscode+Vue 引入 ECharts

https://saas.51cto.com/learner.html#/topic/detail?id=1348233985432469504

https://saas.51cto.com/learner.html#/   手机企业yw-syw51saascto.com/

https://www.cnblogs.com/xinxihua/p/14552132.html 前端05vscode+Vue 引入 ECharts

https://www.cnblogs.com/xinxihua/p/14552105.html 前端04测试一个的项目

https://www.cnblogs.com/xinxihua/p/14551901.html 前端3vue+mysql连接实例

https://www.cnblogs.com/xinxihua/p/14551802.html 前端01前端模块化IIFE，commonjs，AMD，UMD，ES6 Module规范超详细讲解

https://www.cnblogs.com/xinxihua/p/14551691.html 前端02vue+vscode+nodejs webpack开发环境搭建

https://www.cnblogs.com/xiayizhan/p/8707127.html    SpringBoot-thymeleaf模板集成

1. node.js
2. VScode(可替代的有很多，Hbuilder、webstorm、sublime等都行)
3. cnpm(可选，为了快一点)

黑白独行 2019-11-12 18:36:10 2615 收藏 1
分类专栏： 移动开发 文章标签： Vue ECharts
版权
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
1
一、引入ECharts

安装echars

cnpm install echarts -S
1
main.js 中引入 echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts
1
2
二、使用ECharts

<template>
<div class="page_view">
<div class="title">报表测试</div>

<div id="myChart1" class="chart-view"></div>

<div id="myChart2" class="chart-view"></div>

<div id="myChart3" class="chart-view"></div>

<div id="myChart4" class="chart-view-4"></div>
</div>
</template>

<script>

var that;

export default {
name: 'echart',
data () {
return {
chart1_title: '柱图测试',
chart1_dataName:'销量',
chart1_name:null,
chart1_data:null,
}
},
created: function () {
// `this` 指向 vm 实例
that = this

that.chart1_name = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];
that.chart1_data = [5, 20, 36, 10, 10, 20];
},
mounted(){
//页面加载完成后,才执行
that.showChart1();

that.showChart2();

that.showChart3();

that.showChart4();
},
methods: {
showChart1()
{
// 基于准备好的dom，初始化echarts实例
let myChart1 = that.$echarts.init(document.getElementById('myChart1'))
// 绘制图表
myChart1.setOption({
title: { text: that.chart1_title },
tooltip: {},
xAxis: {
data:that.chart1_name
},
yAxis: {},
series: [{
name: that.chart1_dataName,
type: 'bar',
data:that.chart1_data,
}]
});
},
showChart2()
{
console.log("showChart2")
let data2 = [{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}];

// 基于准备好的dom，初始化echarts实例
let myChart2 = that.$echarts.init(document.getElementById('myChart2'))
// 绘制图表
var option2 = {
title: {
text: '销量分布'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: {
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data: data2,
}
};

myChart2.setOption(option2)
},
showChart3()
{
let myChart3 = that.$echarts.init(document.getElementById('myChart3'))
var option3 = {
title: {
text: '环形图',
x:'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'right',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series: [
{
name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '14',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};
myChart3.setOption(option3);
},
showChart4()
{
var myChart4= that.$echarts.init(document.getElementById('myChart4'));
let option4 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: true},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['蒸发量','降水量','平均温度']
},
xAxis: [
{
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
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,
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]
}
]
};
myChart4.setOption(option4)
}
}
}
</script>

<style>

.page_view
{
padding:20px 3%;
text-align: center;
}

.title{
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}

.chart-view{
margin: 20px auto;
400px;
height: 400px;
}

.chart-view-4{
margin: 20px auto;
800px;
height: 600px;
}
</style>

项目的时候需要全局引入，但是如果自己写一个demo页面可以选择按需引入，这里主要是来谈全局引入

1、首先：在编辑器(我使用的是vscode)的终端输入命令行npm install echarts --save,安装Echarts

2、其次：在入口文件main.js里面引入，import echarts from 'echarts'     Vue.prototype.$echarts = echarts

3、最后：

在html页面加入放置饼状图和柱状图的div，但是必须为div设置宽和高；

<!-- 饼状图 -->

< div id = "myPie" :style = " { '600px' ,height: '500px' ,left: '80px' } " ></ div >

</ div >

<!-- 柱状图 -->

< div style = "display:inline-block;left:230px;" id = "myBar" :style = " { '600px' ,height: '500px' ,} " ></ div>

在js中引入

<script>

   export default {

        data(){

             return{

                      monthNumber: [],

                      monthRevenue: [],

              }

        }   

       mounted() {

              this .queryRecentlyMonth();

              this .monthNumber = this .calculateMonth();

              this .queryRevenueExpenditureData();

       },

      methods:{

             //初始化数据

             queryRevenueExpenditureData() {

                        let that = this ;

                        queryRevenueExpenditure( this .queryRevenueExpenditureParam).then( response => {

                              that.revenueExpenditure = response.data;

                             that.drawLine();

                            } );

                         queryRevenuesForRecentMonths().then(response => {

                          let res = response.data.monthRevenues;

                          that.monthRevenue = that.calculateRevenueByMonth(res);

                           that.drawLine();

                          });

                 },

                 //计算最近6个月

                  calculateMonth() {

                       //创建现在的时间

                      var data = new Date();

                      //获取年

                      var year = data.getFullYear();

                     //获取月

                     var mon = data.getMonth() + 1 ;

                     var arry = new Array();

                     arry[ 0 ] = mon;

                     for ( var i = 1 ; i < 6 ; i ++ ) {

                         mon = mon - 1 ;

                              if (mon <= 0 ) {

                                   year = year - 1 ;

                                   mon = mon + 12 ;

                               }

                          arry[i] = mon;

                      }

                   return arry.reverse();

                 },

                //计算指定月的收入

                calculateRevenueByMonth(data) {

                       let revenues = [];

                       let months = this .monthNumber;

                       if (data) {

                           months.forEach(m => {

                           let flag = false ;

                           data.forEach(n => {

                                   let currentMonth = n.monthNumber;

                                   if (currentMonth == m) {

                                   revenues.push(n.monthRevenue);

                                   flag = true ;

                                   return ;

                            }

                       });

                      if ( ! flag) {

                            revenues.push( 0 );

                       }

                  });

                }

            return revenues;

         },    

     

drawLine() {

// 基于准备好的dom，初始化echarts实例

let myPie = this .$echarts.init(document.getElementById( "myPie" )); //饼状图

let myBar = this .$echarts.init(document.getElementById( "myBar" )); //柱状图

// 饼状图

myPie.setOption({

        tooltip: {

                trigger: "item"

                // formatter: "{a} <br/>{b}: {c} ({d}%)"

         },

        color: [ "#32CD32" , "#63B8FF" , " #EE4000" ],

        legend: {

               bottom: 10 ,

                left: "center" ,

                data: [ "总收入" , "总支出" , "收支差额" ]

        },

        series: [

            {

                type: "pie" ,

                radius: "65%" ,

                center: [ "50%" , "50%" ],

                selectedMode: "single" ,

                label: {

                   normal: {

                            position: "inner" ,

                            // show: false,

                            formatter: "￥{c}" //自定义显示格式(b:name, c:value, d:百分比)

                    }

                },

                data: [

                    { value: this .revenueExpenditure.totalRevenue, name: "总收入" },

                    {value: this .revenueExpenditure.totalExpenditure, name: "总支出" },

                     {value: this .revenueExpenditure.revenueExpenditureBalance, name: "收支差额" }

                 ]

          }

       ]

    });

     // 绘制图表柱状图

     myBar.setOption({

            title: { text: "" ,

                     subtext: ""

            },

            tooltip: { show: true },

            //grid 区域是否包含坐标轴的刻度标签

            // grid: { left: "1%", right: "1%", bottom: "4%", containLabel: true },

           xAxis: {

              type: "category" ,

              name: "月份" ,

             data: this .monthNumberLabel

           },

            yAxis: {

                 type: "value" ,

                 splitLine: { show: false }, //改设置不显示坐标区域内的y轴分割线

                  name: "收入（元）"

                 // data:this.monthRevenue

           },

          series: [

                {

                   type: "bar" ,

                    itemStyle: {

                    normal: { color: "#CCCCCC" }

                    // label:{show:true,formatter:function(){return }}

                },

           emphasis: {

                shadowBlur: 40 ,

                shadowOffsetX: 10 ,

                shadowColor: "rgba(0, 0, 0, 0.5)"

            },

            data: this .monthRevenue

     } ],

    label: {

        //以下为是否显示，显示位置和显示格式的设置了

        show: true , //开启显示

        position: "top" , //在上方显示

        formatter: "￥{c}" ,

        textStyle: {

            //数值样式

            color: "red" ,

            fontSize: 16

        }

    }

  });

},

//计算属性

              computed: {

                      monthNumberLabel: function () {

                                  let result = [];

                                  if ( this .monthNumber) {

                                          this .monthNumber.forEach(x => {

                                             result.push(x + "月" );

                                        });

                                    }

                                   return result;

                             }

                       }

                   }

   }

</script>

最后的最后，附上echarts的官方文档，写的很是详细：http://echarts.baidu.com/tutorial.html