前端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;
width: 400px;
height: 400px;
}


.chart-view-4{
margin: 20px auto;
width: 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 = " {width: '600px' ,height: '500px' ,left: '80px' } " ></ div >
</ div >
<!-- 柱状图 -->
< div style = "display:inline-block;left:230px;" id = "myBar" :style = " {width: '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

 

posted on 2021-03-17 21:45  shuzihua  阅读(581)  评论(0)  编辑  收藏  举报

导航