一.介绍

1.课程介绍与目标

Echarts5.0的基本使用
项目express后端搭建
Vue3.0项目实施
阿里云与Nginx项目上线

2. 数据可视化介绍

什么是数据可视化
数据可视化的展现形式
数据可视化作用

2.1什么是数据可视化?

数据可视化,是关于数据视觉表现形式的科学技术研究

2.2 数据可视化的展现形式?

数据可视化有众多展现方式,不同的数据类型要选择合适的展现方法。

 

echarts官网:Examples - Apache ECharts

2.3 数据可视化作用

数据可视化的意义是帮助人更好的分析数据
​
可视化增加数据的灵性

3.Echarts -- 商业级数据图表介绍

网址:Apache ECharts

3.1 特点

1.丰富的可视化类型
2.多数据格式无需转换
3.千万级别的数据进行展示
4.移动端优化
5.多渲染方案跨平台使用
6.深度的交互方案
7.动态数据
8.绚丽的特效

二. Echarts 初体验

1. HelloWord 初体验

步骤:
1.先搭建vue2.0的项目
2.下载安装echarts
	npm install --save echarts
3.在view/About.vue的下修改代码
<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'

export default {
  mounted () {
    const myEcharts = echarts.init(this.$refs.mycharts)
    // 设置参数
    myEcharts.setOption({
      title: { // echarts标题
        text: 'Hello Echarts'
      },
      xAxis: {
        data: ['胡歌', '林依晨', '地瓜', '小七']
      },
      yAxis: {

      },
      series: { // 系列:设置当前数据可映射的图形
        name: '天外飞仙',
        type: 'bar',
        data: [520, 1314, 1024, 8888]
      }
    })
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

运行代码时报错

✖ 27 problems (27 errors, 0 warnings)   27 errors and 0 warnings potentially fixable with the `--fix` option.

解决方法

终端运行
npm run lint --fix

结果展示:

 

2. 配置项

2.1 title配置

网址:Documentation - Apache ECharts

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">
​
  </div>
</template>
​
<script>
// 1.引用echartss
import * as echarts from 'echarts'
​
​
export default {
  mounted () {
    const myEcharts = echarts.init(this.$refs.mycharts)
    // 设置参数
    myEcharts.setOption({
      title: { // 设置图表的标题
        text: '主标题',
        link:'http://www.baidu.com',
        target:"self",//当前页打开超链接
        backgroundColor:'green',//设置背景颜色
        borderColor:"yellow",//设置边框颜色
        borderWidth:3,
        x:'center',
        subtext:"副标题",
        sublink:"http://www.baidu.com",//副标题超链接
        textStyle:{
          color:"blue",
          fontSize:30
        }
      },
      xAxis: {
        data: ['胡歌', '林依晨', '地瓜', '小七']
      },
      yAxis: {
​
      },
      series: { // 系列:设置当前数据可映射的图形
        name: '天外飞仙',
        type: 'bar',
        data: [520, 1314, 1024, 8888]
      }
    })
  }
}
</script>
​
<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

报错

ERROR in [eslint]

解决方法:在vue.config.js添加 lintOnSave: false

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

结果

 

2.2 tooltip 配置

网址:Documentation - Apache ECharts

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'


export default {
  mounted () {
    const myEcharts = echarts.init(this.$refs.mycharts)
    // 设置参数
    myEcharts.setOption({
      title: { // 设置图表的标题
        text: '少年杨家将',
      },
      tooltip:{
        //可以不设置,将显示系列的数据
        //也可以设置触发类型
        trigger:"axis",//item图形触发 axis坐标轴触发
        //坐标轴指示器
        axisPointer:{
          type:"cross"//默认显示line 显示一个实线 shadow阴影效果 cross十字准星
        },
        // showContent:false
        //悬浮层样式
        backgroundColor:"yellow",
        borderColor:"green",
        borderWidth:"2",
        textStyle:{
          color:"red"
        },
        //自定义的提示框信息
        formatter(params){
          console.log(params)
          for(let i=0;i<params.length;i++){
            return "名字:"+params[i].name+"\n身高:"+params[i].data.value+"\n年龄:"+params[i].data.age
          }
        }
      },
      xAxis: {
        data: ['胡歌', '彭于晏', '何润东', '刘诗诗']
      },
      yAxis: {
        // type:'height'
      },
      series: { // 系列:设置当前数据可映射的图形
        name: '少年杨家将演员',
        type: 'bar',
        data: [
          {"value":"185","age":"39"},
          {"value":"182","age":"40"},
          {"value":"186","age":"46"},
          {"value":"165","age":"35"}
      ]
      // data: [520, 1314, 1024, 8888]
      }
    })
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>
注意在这边对象中的第一个值只能命名为value,不然柱状图不显示

结果展示

 

2.3 legend配置

网址:Documentation - Apache ECharts

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'


export default {
  mounted () {
    const myEcharts = echarts.init(this.$refs.mycharts)
    // 设置参数
    myEcharts.setOption({
      title: { // 设置图表的标题
        text: '商品',
      },
      tooltip:{
       
      },
      legend:{
        show:true,//设置图例的开启或者是关闭
        icon:"circle",//设置图标形状
        top:"5%",//图例位置
        //图例宽高
        itemWidth:10,
        itemHeight:10,
        textStyle:{
          color:"red",
          fontSize:15,
          backgroundColor:"yellow"
        }
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子',"高跟鞋","袜子"]
      },
      yAxis: {
        // type:'height'
      },
      series: { // 系列:设置当前数据可映射的图形
        name: '销量',
        type: 'bar',
        data: [5,20,36,10,10,20]
      // data: [520, 1314, 1024, 8888]
      }
    })
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

三.Echarts统计图及部分效果介绍

1.柱状图

1.1 柱状图基本设置

网址:Examples - Apache ECharts

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'


export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //设置echarts数据
    //设置轴
    let xData=["福州","厦门","临沂","杭州","苏州"]
    let yData=["20000","40000","10000","30000","18000"]
    //设置配置项
    let option={
      title:{
        text:"城市房价"
      },
      xAxis:{//配置x轴的参数
        data:xData,
        type:"category"//坐标轴的类型。value 数据轴 category 类目轴
      },
      yAxis:{
        //配置y轴的参数
      },
      series:[//系列 配置图标的类型
        {
          name:"城市房价展示",
          type:"bar",//系列类别
          data:yData
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

绘制结果

1.2 柱状图更多效果

网址:Documentation - Apache ECharts

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'


export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //设置echarts数据
    //设置轴
    let xData=["福州","厦门","临沂","杭州","苏州"]
    let yData=["20000","40000","10000","30000","18000"]
    //设置配置项
    let option={
      title:{
        text:"城市房价"
      },
      xAxis:{//配置x轴的参数
        data:xData,
        type:"category"//坐标轴的类型。value 数据轴 category 类目轴
      },
      yAxis:{
        //配置y轴的参数
      },
      series:[//系列 配置图标的类型
        {
          name:"城市房价展示",
          type:"bar",//系列类别
          data:yData,
          //最大值/最小值
          markPoint:{
            data:[
              //标注的数据数组,每一个都是一个对象
              {
                type:"max",
                name:"最大值"
              },
              {
                type:"min",
                name:"最小值"
              }
            ]
          },
          //图标的标线
          markLine:{
            data:[
              {
                type:"average",//平均值
                name:"平均值"
              },
             
            ]
          }
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

1.3 水平柱状图

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">
​
  </div>
</template>
​
<script>
// 1.引用echartss
import * as echarts from 'echarts'
​
​
export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //设置echarts数据
    //设置轴
    let xData=["福州","厦门","临沂","杭州","苏州"]
    let yData=["20000","40000","10000","30000","18000"]
    //设置配置项
    let option={
      title:{
        text:"城市房价"
      },
      xAxis:{//配置x轴的参数
        type:"value"
      },
      yAxis:{
        //配置y轴的参数
        data:xData,
        type:"category"//坐标轴的类型。value 数据轴 category 类目轴
      },
      series:[//系列 配置图标的类型
        {
          name:"城市房价展示",
          type:"bar",//系列类别
          barWidth:20,//设置宽度
          // color:"green",//设置轴的颜色
          itemStyle:{
            normal:{
              color:function(params){
                let colorList=['pink','red',"green","blue","yellow"]
                return colorList[params.dataIndex]
              }
            }
          },
          data:yData,
          //最大值/最小值
          markPoint:{
            data:[
              //标注的数据数组,每一个都是一个对象
              {
                type:"max",
                name:"最大值"
              },
              {
                type:"min",
                name:"最小值"
              }
            ]
          },
          //图标的标线
          markLine:{
            data:[
              {
                type:"average",//平均值
                name:"平均值"
              },
             
            ]
          }
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>
​
<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>
​

结果展示

 

 

2. 饼状图

2.1饼状图基本设置

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'


export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //设置数据
    let data=[
      {value:67,name:"美食"},
      {value:44,name:"运动"},
      {value:88,name:"摄影"},
      {value:32,name:"电影"},
      {value:53,name:"阅读"}
    ]
    let option={
      title:{
        text:"饼状图",
        left:"center"

      },
      legend:{
        left:"left",
        //图例的布局朝向
        orient:"verical"
      },
      series:[
        {
          name:"销量统计",
          type:'pie',//设置为饼状图
          data
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

 

2.2 饼状图更多设置

2.2.1 环形图设置

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'


export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //设置数据
    let data=[
      {value:67,name:"美食"},
      {value:44,name:"运动"},
      {value:88,name:"摄影"},
      {value:32,name:"电影"},
      {value:53,name:"阅读"}
    ]
    let option={
      title:{
        text:"饼状图",
        left:"center"

      },
      legend:{
        left:"left",
        //图例的布局朝向
        orient:"verical"
      },
      series:[
        {
          name:"销量统计",
          type:'pie',//设置为饼状图
          data,
          radius:["40%","70%"],//设置饼图的半径 第一项内半径 第二项外半径 设置环形图
          //设置环形图的文本标签
          label:{
            show:true,
            position:"inside"//outside 外侧展示 inside 内展示 center 中心展示
          }
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

 

2.2.2 南丁格尔图设置

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'


export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //设置数据
    // let data=[
    //   {value:67,name:"美食"},
    //   {value:44,name:"运动"},
    //   {value:88,name:"摄影"},
    //   {value:32,name:"电影"},
    //   {value:53,name:"阅读"}
    // ]
    let data=[
      {value:67,name:"美食",itemStyle:{normal:{color:"green"}}},
      {value:44,name:"运动",itemStyle:{normal:{color:"yellow"}}},
      {value:88,name:"摄影",itemStyle:{normal:{color:"pink"}}},
      {value:32,name:"电影",itemStyle:{normal:{color:"gray"}}},
      {value:53,name:"阅读",itemStyle:{normal:{color:"blue"}}}
    ]
    let option={
      title:{
        text:"饼状图",
        left:"center"

      },
      legend:{
        left:"left",
        //图例的布局朝向
        orient:"verical"
      },
      series:[
        {
          name:"销量统计",
          type:'pie',//设置为饼状图
          data,
          radius:["40%","70%"],//设置饼图的半径 第一项内半径 第二项外半径 设置环形图
          //设置环形图的文本标签
          label:{
            show:true,
            position:"inside"//outside 外侧展示 inside 内展示 center 中心展示
          },
          roseType:"area", //是否设置为南丁格尔图
          itemStyle:{
            color:"#c23531",
            shadowBlur:200,
            shadowColor:"reba(0,0,0,.5)"
            
          }
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

3. 折线图

3.1 折线图基本设置

网址:Examples - Apache ECharts

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">
​
  </div>
</template>
​
<script>
// 1.引用echartss
import * as echarts from 'echarts'
​
​
export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //设置数据
    let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    
    let data=[150, 230, 224, 218, 135, 147, 260]
    //设置配置项
    let option={
      xAxis:{
        type: 'category',
        data:xData
      },
      yAxis:{
        type:"value"
      },
      series:[
        {
          type:'line',//设置为折线图
          data,
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>
​
<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

3.2 折线图更多设置

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">
​
  </div>
</template>
​
<script>
// 1.引用echartss
import * as echarts from 'echarts'
​
​
export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //设置数据
    let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    
    let data=[50, 230, 24, 218, 135, 147, 260]
    //设置配置项
    let option={
      xAxis:{
        type: 'category',
        data:xData
      },
      yAxis:{
        type:"value"
      },
      series:[
        {
          type:'line',//设置为折线图
          data,
          smooth:true,//开启平滑的过渡
          areaStyle:{},//设置面积
          markPoint:{//获取最大值/最小值
            data:[
              {type:"max",name:"最大值"},
              {type:"min",name:"最小值"}
            ]
          },
          markLine:{
            data:[
              {
                type:"average",name:"平均值"
              }
            ]
          }
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>
​
<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

3.3 折线图堆叠效果

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'


export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //设置数据
    let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    
    let dataA=[50, 230, 24, 218, 135, 147, 260]
    let dataB=[180, 20, 224, 118, 125, 125, 148]
    let dataC=[135, 147, 260, 288, 136, 47, 160]
    let dataD=[30, 280, 224, 48, 175, 247, 360]

    //设置配置项
    let option={
      xAxis:{
        type: 'category',
        data:xData
      },
      yAxis:{
        type:"value"
      },
      series:[
        {
          name:"美食",
          type:"line",
          //数据的堆叠
          stack:"num",//同类型的数据需要匹配相同的stack属性值
          data:dataA,
          //样式填充
          areaStyle:{},
          //选中高亮状态
          emphasis:{
            focus:"series"//聚焦当前的区域高亮
          }
        },
        {
          name:"日化",
          type:"line",
          //数据的堆叠
          stack:"num",//同类型的数据需要匹配相同的stack属性值
          data:dataB,
          //样式填充
          areaStyle:{},
          //选中高亮状态
          emphasis:{
            focus:"series"//聚焦当前的区域高亮
          }
        },
        {
          name:"摄影",
          type:"line",
          //数据的堆叠
          stack:"num",//同类型的数据需要匹配相同的stack属性值
          data:dataC,
          //样式填充
          areaStyle:{},
          //选中高亮状态
          emphasis:{
            focus:"series"//聚焦当前的区域高亮
          }
        },
        {
          name:"插花",
          type:"line",
          //数据的堆叠
          stack:"num",//同类型的数据需要匹配相同的stack属性值
          data:dataD,
          //样式填充
          areaStyle:{},
          //选中高亮状态
          emphasis:{
            focus:"series"//聚焦当前的区域高亮
          }
        },
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

4. 散点图

4.1 散点图基本效果展示

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'


export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //设置数据
    let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    
    let dataA=[50, 230, 24, 218, 135, 147, 260]
    let dataB=[180, 20, 224, 118, 125, 125, 148]
    let dataC=[135, 147, 260, 288, 136, 47, 160]
    let dataD=[30, 280, 224, 48, 175, 247, 360]

    //设置配置项
    let option={
      xAxis:{}
      ,
      yAxis:{
      },
      series:[{
        type:"scatter",//散点图
        data: [
          [10.0, 8.04],
          [8.07, 6.95],
          [13.0, 7.58],
          [9.05, 8.81],
          [11.0, 8.33],
          [14.0, 7.66],
          [13.4, 6.81],
          [10.0, 6.33],
          [14.0, 8.96],
          [12.5, 6.82],
          [9.15, 7.2],
          [11.5, 7.2],
          [3.03, 4.23],
          [12.2, 7.83],
          [2.02, 4.47],
          [1.05, 3.33],
          [4.05, 4.96],
          [6.03, 7.24],
          [12.0, 6.26],
          [12.0, 8.84],
          [7.08, 5.82],
          [5.02, 5.68]
        ],}
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

4.2 散点图效果实现

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">
​
  </div>
</template>
​
<script>
// 1.引用echartss
import * as echarts from 'echarts'
​
​
export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //设置数据
    let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    
    let dataA=[50, 230, 24, 218, 135, 147, 260]
    let dataB=[180, 20, 224, 118, 125, 125, 148]
    let dataC=[135, 147, 260, 288, 136, 47, 160]
    let dataD=[30, 280, 224, 48, 175, 247, 360]
​
    //设置配置项
    let option={
      xAxis:{}
      ,
      yAxis:{
      },
      tooltip:{},
      series:[{
        symbolSize:20,
        type:"scatter",//散点图
        data: [
          [10.0, 8.04],
          [8.07, 6.95],
          [13.0, 7.58],
          [9.05, 8.81],
          [11.0, 8.33],
          [14.0, 7.66],
          [13.4, 6.81],
          [10.0, 6.33],
          [14.0, 8.96],
          [12.5, 6.82],
          [9.15, 7.2],
          [11.5, 7.2],
          [3.03, 4.23],
          [12.2, 7.83],
          [2.02, 4.47],
          [1.05, 3.33],
          [4.05, 4.96],
          [6.03, 7.24],
          [12.0, 6.26],
          [12.0, 8.84],
          [7.08, 5.82],
          [5.02, 5.68]
        ],
        //图形的样式
        //color:"red"
        color:{
          //线性渐变
          type:"linear",
          //相当于在图形包围盒中的百分比
          x:0,
          y:0,
          x2:1,
          y2:0,
          colorStops:[
            {
              offset:0,
              color:"#00ccff"
            },
            {
              offset:1,
              color:"rgba(255,173,25,.9)"
            }
          ]
        },
        emphasis:{
          //高亮设置
          itemStyle:{
            borderColor:"rgba(100,200,50,.5)",
            borderWidth:30
          }
        }
      }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>
​
<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

5. 配置项grid

网址:Documentation - Apache ECharts

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">
​
  </div>
</template>
​
<script>
// 1.引用echartss
import * as echarts from 'echarts'
​
​
export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //设置echarts数据
    //设置轴
    let xData=["福州","厦门","临沂","杭州","苏州"]
    let yData=["20000","40000","10000","30000","18000"]
    //设置配置项
    let option={
      title:{
        text:"城市房价"
      },
      xAxis:{//配置x轴的参数
        data:xData,
        type:"category"//坐标轴的类型。value 数据轴 category 类目轴
      },
      yAxis:{
        //配置y轴的参数
      },
      grid:{
        //显示内部图标容器的边框
        show:true,
        //设置内部图标容器距离外部边框的距离
        left:"20%",
        top:"20%",
        right:"20%",
        bottom:"20%",
        backgroundColor:"gray",
        borderColor:"green"
      },
      series:[//系列 配置图标的类型
        {
          name:"城市房价展示",
          type:"bar",//系列类别
          data:yData
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>
​
<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

6. k线图

6.1k线图基本设置

网址:Examples - Apache ECharts

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'


export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    
    //设置配置项
    let option={
     
      xAxis:{//配置x轴的参数
       data:['日化','蔬菜',"电器","美妆"]
      },
      yAxis:{
        //配置y轴的参数
      },
      
      series:[//系列 配置图标的类型
        {
         
          type:"candlestick",//设置k线图的类别
          data:[
            [20,34,10,38],
            [40,35,30,50],
            [31,38,33,44],
            [38,15,5,42]
          ]
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

6.2 k线图效果优化

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv"></div>
</template>

<script>
// 1.引用echartss
import * as echarts from "echarts";

export default {
  data(){
    return {
      kdata:[
            [20, 34, 10, 38],
            [40, 35, 30, 50],
            [31, 38, 33, 44],
            [38, 15, 5, 42],
          ],
    }
  },
  computed:{
    newdata(){
      return this.kdata.map(v=>v[0])
    }
  },
  mounted() {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts);

    //设置配置项
    let option = {
      xAxis: {
        //配置x轴的参数
        data: ["日化", "蔬菜", "电器", "美妆"],
      },
      yAxis: {
        //配置y轴的参数
      },
      tooltip: {
        trjgger: "axis",
        axisPointer: {
          type: "cross",
        },
      },
      series: [
        //系列 配置图标的类型
        {
          type: "candlestick", //设置k线图的类别
          data: this.kdata,
          itemStyle: {
            color: "#ec5566", //设置上涨的颜色
            color0: "blue", //下跌的颜色
            borderColor: "#8A0000",
            borderColor0: "#008f28",
          },
          markPoint: {
            data:[
              {
                name:"最大值",
                type:"max",
                valueDim:"highest"//在哪个维度上进行最大最小值的设置
              },
              {
                name:"最小值",
                type:"min",
                valueDim:"lowest"
              },
              {
                name:"平均值",
                type:"average",
                valueDim:"close"
              }
            ]
          },
        },
        {
          type:"line",
          smooth:true,
          data:this.newdata
        }
      ],
    };
    //绘制统计图
    myEcharts.setOption(option);
  },
};
</script>

<style>
#demoDiv {
  width: 500px;
  height: 500px;
  border: 1px solid gold;
}
</style>

结果展示

 

7.雷达图

7.1 雷达图基本设置

网址:Examples - Apache ECharts

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv"></div>
</template>
​
<script>
// 1.引用echartss
import * as echarts from "echarts";
​
export default {
 
  mounted() {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts);
​
    //设置配置项
    let option = {
      title:{
        text:"雷达图"
      },
      radar:[//只适用于雷达图
        {
          shape:"circle",
          indicator:[
            //雷达图的指示器,用来指定雷达图中的多个变量(维度)
            {name:"口红",max:"6500"},
            {name:"黄瓜",max:"16000"},
            {name:"苹果",max:"30000"},
            {name:"电脑",max:"38000"},
            {name:"电灯泡",max:"52000"},
            {name:"汽车",max:"25000"},
          ]
        }
        ],
        series:[
          {
            type:"radar",
            data:[{
              value:[4200,5300,6666,22345,12340,14567]
            }]
          }
        ]
    };
    //绘制统计图
    myEcharts.setOption(option);
  },
};
</script>
​
<style>
#demoDiv {
  width: 500px;
  height: 500px;
  border: 1px solid gold;
}
</style>

结果展示

 

7.2雷达图效果提升

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv"></div>
</template>
​
<script>
// 1.引用echartss
import * as echarts from "echarts";
​
export default {
  mounted() {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts);
​
    //设置配置项
    let option = {
      title: {
        text: "雷达图",
      },
      radar: [
        //只适用于雷达图
        {
          shape: "circle",
          indicator: [
            //雷达图的指示器,用来指定雷达图中的多个变量(维度)
            { name: "口红", max: "6500" },
            { name: "黄瓜", max: "16000" },
            { name: "苹果", max: "30000" },
            { name: "电脑", max: "38000" },
            { name: "电灯泡", max: "52000" },
            { name: "汽车", max: "25000" },
          ],
          //半径
          radius: 120,
          //坐标系的起始角度
          startAngle: 180,
          splitNumber: 4, //设置分割数目
          axisName: {
            formatter: "{value}",
            color: "#428bd4",
          },
          //设置分割区的样式
          splitArea: {
            areaStyle: {
              //分割区域的样式
              color: ["#77eade", "#26c3be", "#00afe9", "#99sdd7"],
              shadowColor: "rgba(0,0,0,.2)",
              shadowBlur: 10,
            },
          },
        },
      ],
      series: [
        {
          type: "radar",
          data: [
            {
              value: [4200, 5300, 6666, 22345, 12340, 14567],
              areaStyle:{
                color:"gold"
              }
            },
          ],
          lineStyle:{
            type:"dashed"
          }
        },
      ],
    };
    //绘制统计图
    myEcharts.setOption(option);
  },
};
</script>
​
<style>
#demoDiv {
  width: 500px;
  height: 500px;
  border: 1px solid gold;
}
</style>

结果展示

 

8.漏斗图

8.1 漏斗图的基本设置

网址:Examples - Apache ECharts

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv"></div>
</template>

<script>
// 1.引用echartss
import * as echarts from "echarts";

export default {
  mounted() {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts);

    //设置配置项
    let option = {
      title:{
        text:"漏斗图"
      },
      tooltip:{
        trigger:"item",
        formatter:"{a}<br/>{b}:{c}%"
      },
      series:[{
        type:"funnel",
        data:[
          {
            value:60,name:"美食"
          },
          {
            value:40,name:"日化"
          },
          {
            value:20,name:"数码"
          },
          {
            value:80,name:"家电"
          },
          {
            value:100,name:"蔬菜"
          },
        ]
      }]
    };
    //绘制统计图
    myEcharts.setOption(option);
  },
};
</script>

<style>
#demoDiv {
  width: 500px;
  height: 500px;
  border: 1px solid gold;
}
</style>

结果展示

 

8.2 漏斗图样式设置

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv"></div>
</template>

<script>
// 1.引用echartss
import * as echarts from "echarts";

export default {
  mounted() {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts);

    //设置配置项
    let option = {
      title:{
        text:"漏斗图"
      },
      tooltip:{
        trigger:"item",
        formatter:"{a}<br/>{b}:{c}%"
      },
      series:[{
        type:"funnel",
        data:[
          {
            value:60,name:"美食"
          },
          {
            value:40,name:"日化"
          },
          {
            value:20,name:"数码"
          },
          {
            value:80,name:"家电"
          },
          {
            value:100,name:"蔬菜"
          },

        ],
        sort:"ascending",//排序
        // sort:"none",
        itemStyle:{
          borderColor:"blue",
          borderWidth:3
        },
        label:{
          show:true,
          position:"inside"
        },
        emphasis:{
          label:{
            fontSize:30
          }
        }

      }]
    };
    //绘制统计图
    myEcharts.setOption(option);
  },
};
</script>

<style>
#demoDiv {
  width: 500px;
  height: 500px;
  border: 1px solid gold;
}
</style>

结果展示

 

9.仪表盘

9.1仪表盘设置

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv"></div>
</template>

<script>
// 1.引用echartss
import * as echarts from "echarts";

export default {
  mounted() {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts);

    //设置配置项
    let option = {
     series:[
      {
        type:"gauge",
        data:[
          {
            value:45,
            name:"提示信息"
          }
        ],
        detail:{
          valueAnimation:true
        },
        progress:{
          show:true
        }
      }
    ]
    };
    //绘制统计图
    myEcharts.setOption(option);
  },
};
</script>

<style>
#demoDiv {
  width: 500px;
  height: 500px;
  border: 1px solid gold;
}
</style>

结果展示

 

10.关系图

10.1关系图设置

网址:Examples - Apache ECharts

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv"></div>
</template>
​
<script>
// 1.引用echartss
import * as echarts from "echarts";
​
export default {
  data(){
    return {
      list:[
        //创建关系图的节点数据
        {
          name:"千层面",
          id:"1",
          symbolSize:30
        },
        {
          name:"意大利面",
          id:"2",
          symbolSize:30
        },
        {
          name:"红烧牛肉面",
          id:"3",
          symbolSize:30
        },
        {
          name:"炸酱面",
          id:"4",
          symbolSize:30
        },
        {
          name:"鸡丝面",
          id:"5",
          symbolSize:30
        },
​
      ],
      //关系数据
      num:[
        {
          source:"1",//边的节点名称
          target:"2",//目标节点名称
          relation:{
            name:"竞争对手",
            id:"1"
          }
        },
        {
          source:"1",//边的节点名称
          target:"3",//目标节点名称
          relation:{
            name:"合作伙伴",
            id:"1"
          }
        },
        {
          source:"3",//边的节点名称
          target:"5",//目标节点名称
          relation:{
            name:"忽近忽远",
            id:"1"
          }
        },
       
      ]
    }
  },
  mounted() {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts);
    
    //设置配置项
    let option = {
      series:[
        {
          type:"graph",//设置关系图
          data:this.list,
          layout:"force",//引导布局
          itemStyle:{
            color:"green"
          },
          label:{
            //图形上的文字
            show:true,
            position:"bottom",
            distance:6,//距离图形的位置
            fontSize:16,
            align:"center"
          },
          force:{
            repulsion:100,
            qravity:0.01,
            edgeLength:200
          },
          links:this.num,
          edgeLabel:{
            show:true,
            position:"middle",
            formatter:(params)=>{
              return params.data.relation.name
            }
          }
        }
      ]
    };
    //绘制统计图
    myEcharts.setOption(option);
  },
};
</script>
​
<style>
#demoDiv {
  width: 500px;
  height: 500px;
  border: 1px solid gold;
}
</style>
​

结果展示

 

11.数据区域缩放

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'


export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //设置数据
    let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    
    let data=[150, 230, 224, 218, 135, 147, 260]
    //设置配置项
    let option={
      xAxis:{
        type: 'category',
        data:xData
      },
      yAxis:{
        type:"value"
      },
      series:[
        {
          type:'line',//设置为折线图
          data,
          smooth:true,
          markPoint:{
            data:[
              {type:"max",name:"Max"},
              {type:"min",name:"Min"}
            ]
          },
          markLine:{
            data:[{
              type:"average",name:"Avg"
            }]
          }
        }
      ],
      dataZoom:[
        {
          type:"slider",
          xAxisIndex:0,
          fliterMode:"none"
        },
        {
          type:"slider",
          yAxisIndex:0,
          fliterMode:"none"
        },
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

12.树图

12.1基本树形图

网址:Examples - Apache ECharts

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'


export default {
  data(){
    return {
      list:{//最外层的数据就是数据的根节点
        name:"根节点",//根节点的名字
        children:[
          {
            name:"层级2",
            children:[
              {
                name:"层级3-1",
                children:[
                  {
                    name:"数据1",value:1314
                  },
                  {
                    name:"数据2",value:520
                  },
                  {
                    name:"数据3",value:88
                  },
                  {
                    name:"数据4",value:666
                  },

                ]
              },
              {
                name:"层级3-2",
                children:[
                  {
                    name:"数据1",value:1314
                  },
                  {
                    name:"数据2",value:520
                  },
                  {
                    name:"数据3",value:88
                  },
                  {
                    name:"数据4",value:666
                  },

                ]
              }
            ]
          }
        ]
      }
    }
  },
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    
    //设置配置项
    let option={
      tooltip:{
        trigger:"item"
      },
      series:[
        {
          type:"tree",
          data:[this.list],
          symbolSize:15,
          label:{
            position:"left",
            verticalAlign:"middle",
            align:"center",
            fontSize:10
          },
          leaves:{
            label:{
              position:"right",
              verticalAlign:"middle",
              align:"center",
            }
          },
          emphasis:{
            focus:"descendant"
          }
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

12.2 方向切换树形图

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">
​
  </div>
</template>
​
<script>
// 1.引用echartss
import * as echarts from 'echarts'
​
​
export default {
  data(){
    return {
      list:{//最外层的数据就是数据的根节点
        name:"根节点",//根节点的名字
        children:[
          {
            name:"层级2",
            children:[
              {
                name:"层级3-1",
                children:[
                  {
                    name:"数据1",value:1314
                  },
                  {
                    name:"数据2",value:520
                  },
                  {
                    name:"数据3",value:88
                  },
                  {
                    name:"数据4",value:666
                  },
​
                ]
              },
              {
                name:"层级3-2",
                children:[
                  {
                    name:"数据1",value:1314
                  },
                  {
                    name:"数据2",value:520
                  },
                  {
                    name:"数据3",value:88
                  },
                  {
                    name:"数据4",value:666
                  },
​
                ]
              }
            ]
          }
        ]
      }
    }
  },
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    
    //设置配置项
    let option={
      tooltip:{
        trigger:"item"
      },
      series:[
        {
          type:"tree",
          data:[this.list],
          symbolSize:15,
          left:"20%",
          //设置布局方向
          //orient:"RL",//从右向左
          orient:"TB",
          label:{
            rotate:90,
            position:"left",
            verticalAlign:"middle",
            align:"center",
            fontSize:10
          },
          leaves:{
            label:{
              position:"right",
              verticalAlign:"middle",
              align:"center",
            }
          },
          emphasis:{
            focus:"descendant"
          }
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>
​
<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

13.数据排序

网址:Documentation - Apache ECharts

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">
​
  </div>
</template>
​
<script>
// 1.引用echartss
import * as echarts from 'echarts'
​
​
export default {
 
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    
    //设置配置项
    let option={
      dataset:[
        {
        //数据的分类
        dimensions:["类别","数量"],
        //分类数据
        source:[
          ["美食",123],
          ["日化",98],
          ["汉堡包",134],
          ["老八密制小汉堡",33],
          ["酸粉糖",12],
          ["乳酪",78],
          ["地瓜干",34],
          ["土豆片",56],
          ["黄瓜丝",90],
        ]
        },
        {
          transform:{
            type:"sort",
            config:{
              dimension:"数量",
              order:"desc"
            }
          }
        },
      ],
      xAxis:{
        type:"category",
        axisLabel:{
          interval:0,
          rotate:30
        }
      },
      yAxis:{},
      series:[
        {
          type:"bar",
          encode:
          {
            x:"类别",
            y:"数量"
          },
          datasetIndex:1
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>
​
<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

14.内置主题设置

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'


export default {
  mounted () {
    //echarts中内置主题
    // light  dark
    //echarts.init(‘图表dom的设置’,主题设置)
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts,"dark")
    //设置echarts数据
    //设置轴
    let xData=["福州","厦门","临沂","杭州","苏州"]
    let yData=["20000","40000","10000","30000","18000"]
    //设置配置项
    let option={
      title:{
        text:"城市房价"
      },
      xAxis:{//配置x轴的参数
        data:xData,
        type:"category"//坐标轴的类型。value 数据轴 category 类目轴
      },
      yAxis:{
        //配置y轴的参数
      },
      series:[//系列 配置图标的类型
        {
          name:"城市房价展示",
          type:"bar",//系列类别
          data:yData
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

15.自定义主题

步骤1:进入主题下载,选择定制主题
https://echarts.apache.org/zh/download-theme.html

 

步骤2:下载对应主题的json文件,复制
步骤3:将复制的文件放在项目js文件中

 

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'
import {roma} from "../assets/index.js"

export default {
  mounted () {
    //自定义主题
    //1.引用主题文件的内容
   
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts,roma)
    //设置echarts数据
    //设置轴
    let xData=["福州","厦门","临沂","杭州","苏州"]
    let yData=["20000","40000","10000","30000","18000"]
    //设置配置项
    let option={
      title:{
        text:"城市房价"
      },
      xAxis:{//配置x轴的参数
        data:xData,
        type:"category"//坐标轴的类型。value 数据轴 category 类目轴
      },
      yAxis:{
        //配置y轴的参数
      },
      series:[//系列 配置图标的类型
        {
          name:"城市房价展示",
          type:"bar",//系列类别
          data:yData
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

16.中国地图展示

中国地图数据下载网址:DataV.GeoAtlas地理小工具系列

将下载的数据放到js文件然后导入

 

获取福州市坐标

拾取坐标系统

 

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">
​
  </div>
</template>
​
<script>
// 1.引用echartss
import * as echarts from 'echarts'
import {roma} from "../assets/index.js"
import {mapData} from "../assets/mapData.js"
export default {
  mounted () {
    //自定义主题
    //1.引用主题文件的内容
   
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts,roma)
    //注册当前使用的地图名
    echarts.registerMap("ChinaMap",mapData)
    let option={
      geo:{
        //地理坐标组件
        type:"map",
        map:"ChinaMap",
        roam:true,//开启平移
        zoom:5,
        center:[119.306345,26.080429]//福州市
      }
    }
    
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>
​
<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

17.省份地图展示与效果优化

地图下载:https://geo.datav.aliyun.com/areas_v3/bound/350000_full.json

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'
import {roma} from "../assets/index.js"
import {mapData} from "../assets/mapData.js"
export default {
  mounted () {
    //自定义主题
    //1.引用主题文件的内容
   
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts,roma)
    //注册当前使用的地图名
    echarts.registerMap("ChinaMap",mapData)
    let option={
      geo:{
        //地理坐标组件
        type:"map",
        map:"ChinaMap",
        roam:true,//开启平移
        // zoom:5,
        // center:[119.306345,26.080429]//福州市
        label:{
          show:true,
          color:"black",
          fontSize:10,

        },
        itemStyle:{
          areaColor:"green"
        }
      }
    }
    
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

18.地图标记设置与效果

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv"></div>
</template>

<script>
// 1.引用echartss
import * as echarts from "echarts";
import { roma } from "../assets/index.js";
import { mapData } from "../assets/mapData.js";
export default {
  mounted() {
    //自定义主题
    //1.引用主题文件的内容

    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts, roma);
    //注册当前使用的地图名
    echarts.registerMap("ChinaMap", mapData);
    let option = {
      geo: {
        //地理坐标组件
        type: "map",
        map: "ChinaMap",
        roam: true, //开启平移
        // zoom:5,
        // center:[119.306345,26.080429]//福州市
      },

      series: [
        //散点图
        {
          type: "scatter",
          data: [
            {
              name: "北京市", //数据项的名字
              value: [116.46, 39.92, 4000],
            },
          ],
          coordinateSystem: "geo",
          symbolSize: 30,
          // label:{
          //   show:true
          // }
        },
        {
          type: "effectScatter", //涟漪效果散点图
          coordinateSystem: "geo",
          data: [
            {
              name: "福州市", //数据项的名字
              value: [119.308069, 26.078352, 4000],
            },
          ],
          //设置涟漪效果的相关配置
          rippleEffect:{
            number:2,//波纹数量
            scale:4
          },
          itemStyle:{
            color:"gold"
          }
        },
      ],
    };

    //绘制统计图
    myEcharts.setOption(option);
  },
};
</script>

<style>
#demoDiv {
  width: 500px;
  height: 500px;
  border: 1px solid gold;
}
</style>

结果展示

 

19.图表自适应大小

效果:让图表根据浏览器大小自适应
<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'


export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //设置数据
    let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    
    let dataA=[50, 230, 24, 218, 135, 147, 260]
    let dataB=[180, 20, 224, 118, 125, 125, 148]
    let dataC=[135, 147, 260, 288, 136, 47, 160]
    let dataD=[30, 280, 224, 48, 175, 247, 360]

    //设置配置项
    let option={
      xAxis:{
        type: 'category',
        data:xData
      },
      yAxis:{
        type:"value"
      },
      series:[
        {
          name:"美食",
          type:"line",
          //数据的堆叠
          stack:"num",//同类型的数据需要匹配相同的stack属性值
          data:dataA,
          //样式填充
          areaStyle:{},
          //选中高亮状态
          emphasis:{
            focus:"series"//聚焦当前的区域高亮
          }
        },
        {
          name:"日化",
          type:"line",
          //数据的堆叠
          stack:"num",//同类型的数据需要匹配相同的stack属性值
          data:dataB,
          //样式填充
          areaStyle:{},
          //选中高亮状态
          emphasis:{
            focus:"series"//聚焦当前的区域高亮
          }
        },
        {
          name:"摄影",
          type:"line",
          //数据的堆叠
          stack:"num",//同类型的数据需要匹配相同的stack属性值
          data:dataC,
          //样式填充
          areaStyle:{},
          //选中高亮状态
          emphasis:{
            focus:"series"//聚焦当前的区域高亮
          }
        },
        {
          name:"插花",
          type:"line",
          //数据的堆叠
          stack:"num",//同类型的数据需要匹配相同的stack属性值
          data:dataD,
          //样式填充
          areaStyle:{},
          //选中高亮状态
          emphasis:{
            focus:"series"//聚焦当前的区域高亮
          }
        },
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)

    //监听页面大小的改变
    window.addEventListener("resize",()=>{
      console.log("浏览器大小改变了")
      myEcharts.resize()
    })
  }
}
</script>

<style>
  #demoDiv{
    width: 100%;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

20.加载动画效果

json-server使用
1)全局下载 npm install -g json-server
2)下载axios npm install --save axios
3)启动json-server
json-server --watch data.json --port 9042
模拟时将网速变为3G

 

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv"></div>
</template>

<script>
// 1.引用echartss
import * as echarts from "echarts";

import axios from "axios";

export default {
  data() {
    return {
      edata: [],
    };
  },
  methods: {
    async linkData() {
      let echatrtsData = await axios({
        url: "http://localhost:9042/one",
      });
      console.log(echatrtsData.data);
      this.edata = echatrtsData.data;
    },
  },

  //json-server
  /**
   * 1)全局下载 npm install -g json-server
   * 2)新建文件夹与文件用来容纳模拟数据
   * 3)启动json-server
   */
  mounted() {
    const myEcharts = echarts.init(this.$refs.mycharts);
    //开始等待
    myEcharts.showLoading();
    this.linkData().then(() => {
      myEcharts.hideLoading();
      let option = {
        //结束等待

        title: {
          text: "饼状图",
          left: "center",
        },
        legend: {
          left: "left",
          //图例的布局朝向
          orient: "verical",
        },
        series: [
          {
            name: "销量统计",
            type: "pie", //设置为饼状图
            data: this.edata,
            radius: ["40%", "70%"], //设置饼图的半径 第一项内半径 第二项外半径 设置环形图
            //设置环形图的文本标签
            label: {
              show: true,
              position: "inside", //outside 外侧展示 inside 内展示 center 中心展示
            },
            roseType: "area", //是否设置为南丁格尔图
            itemStyle: {
              color: "#c23531",
              shadowBlur: 200,
              shadowColor: "reba(0,0,0,.5)",
            },
          },
        ],
      };
      //绘制统计图
      myEcharts.setOption(option);
    });
    //初始化
  },
};
</script>

<style>
#demoDiv {
  width: 500px;
  height: 500px;
  border: 1px solid gold;
}
</style>

结果展示

 

21.图表动画配置

动画方面的配置项(animation)

 

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'


export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //设置echarts数据
    //设置轴
    let xData=["福州","厦门","临沂","杭州","苏州"]
    let yData=["20000","40000","10000","30000","18000"]
    //设置配置项
    let option={
      animation:true,
      animationThreshold:5,//是否开启动画的阈值,当单个系列显示的图形数量大于阈值时会关闭动画
      animationDuration:5000,//设置动画持续的时间
      animationDelay:2000,//设置动画延迟的时间
      animationEasing:"linear",
      title:{
        text:"城市房价"
      },
      xAxis:{//配置x轴的参数
        type:"value"
      },
      yAxis:{
        //配置y轴的参数
        data:xData,
        type:"category"//坐标轴的类型。value 数据轴 category 类目轴
      },
      series:[//系列 配置图标的类型
        {
          name:"城市房价展示",
          type:"bar",//系列类别
          barWidth:20,//设置宽度
          // color:"green",//设置轴的颜色
          itemStyle:{
            normal:{
              color:function(params){
                let colorList=['pink','red',"green","blue","yellow"]
                return colorList[params.dataIndex]
              }
            }
          },
          data:yData,
          //最大值/最小值
          markPoint:{
            data:[
              //标注的数据数组,每一个都是一个对象
              {
                type:"max",
                name:"最大值"
              },
              {
                type:"min",
                name:"最小值"
              }
            ]
          },
          //图标的标线
          markLine:{
            data:[
              {
                type:"average",//平均值
                name:"平均值"
              },
             
            ]
          }
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

22.ECharts事件

例子1

<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">
​
  </div>
</template>
​
<script>
// 1.引用echartss
import * as echarts from 'echarts'
​
​
export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //事情
    //on方法监听
    myEcharts.on("click",(event)=>{
      console.log("事件",event)
    })
​
​
    //设置echarts数据
    //设置轴
    let xData=["福州","厦门","临沂","杭州","苏州"]
    let yData=["20000","40000","10000","30000","18000"]
    //设置配置项
    let option={
      // animation:true,
      // animationThreshold:5,//是否开启动画的阈值,当单个系列显示的图形数量大于阈值时会关闭动画
      // animationDuration:5000,//设置动画持续的时间
      // animationDelay:2000,//设置动画延迟的时间
      // animationEasing:"linear",
      title:{
        text:"城市房价"
      },
      xAxis:{//配置x轴的参数
        type:"value"
      },
      yAxis:{
        //配置y轴的参数
        data:xData,
        type:"category"//坐标轴的类型。value 数据轴 category 类目轴
      },
      series:[//系列 配置图标的类型
        {
          name:"城市房价展示",
          type:"bar",//系列类别
          barWidth:40,//设置宽度
          // color:"green",//设置轴的颜色
          itemStyle:{
            normal:{
              color:function(params){
                let colorList=['pink','red',"green","blue","yellow"]
                return colorList[params.dataIndex]
              }
            }
          },
          data:yData,
          //最大值/最小值
          markPoint:{
            data:[
              //标注的数据数组,每一个都是一个对象
              {
                type:"max",
                name:"最大值"
              },
              {
                type:"min",
                name:"最小值"
              }
            ]
          },
          //图标的标线
          markLine:{
            data:[
              {
                type:"average",//平均值
                name:"平均值"
              },
             
            ]
          }
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>
​
<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>
​

结果展示

 

例子2

当有两个图时,规定只可以点击一个图
<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">
​
  </div>
</template>
​
<script>
// 1.引用echartss
import * as echarts from 'echarts'
​
​
export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //事情
    //on方法监听
    // myEcharts.on("click",(event)=>{
    //   console.log("事件",event)
    // })
​
    myEcharts.on("click","series.line",(event)=>{
      console.log(event)
    })
    //设置echarts数据
    //设置轴
    let xData=["福州","厦门","临沂","杭州","苏州"]
    let yData=["20000","40000","10000","30000","18000"]
    //设置配置项
    let option={
      // animation:true,
      // animationThreshold:5,//是否开启动画的阈值,当单个系列显示的图形数量大于阈值时会关闭动画
      // animationDuration:5000,//设置动画持续的时间
      // animationDelay:2000,//设置动画延迟的时间
      // animationEasing:"linear",
      title:{
        text:"城市房价"
      },
      xAxis:{//配置x轴的参数
        type:"value"
      },
      yAxis:{
        //配置y轴的参数
        data:xData,
        type:"category"//坐标轴的类型。value 数据轴 category 类目轴
      },
      series:[//系列 配置图标的类型
        {
          name:"城市房价展示",
          type:"bar",//系列类别
          barWidth:40,//设置宽度
          // color:"green",//设置轴的颜色
          itemStyle:{
            normal:{
              color:function(params){
                let colorList=['pink','red',"green","blue","yellow"]
                return colorList[params.dataIndex]
              }
            }
          },
          data:yData,
          //最大值/最小值
          markPoint:{
            data:[
              //标注的数据数组,每一个都是一个对象
              {
                type:"max",
                name:"最大值"
              },
              {
                type:"min",
                name:"最小值"
              }
            ]
          },
          //图标的标线
          markLine:{
            data:[
              {
                type:"average",//平均值
                name:"平均值"
              },
             
            ]
          }
        },
        //折线图
        {
          type:'line',//设置为折线图
          data:[20000, 30000, 19000, 35000, 25000],
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>
​
<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

规定只有点击福州时会显示
<!--About.vue代码-->
<template>
  <!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
  <div ref="mycharts" id="demoDiv">

  </div>
</template>

<script>
// 1.引用echartss
import * as echarts from 'echarts'


export default {
  mounted () {
    //初始化
    const myEcharts = echarts.init(this.$refs.mycharts)
    //事情
    //on方法监听
    // myEcharts.on("click",(event)=>{
    //   console.log("事件",event)
    // })

    myEcharts.on("click",{name:"福州",seriesIndex:1},(event)=>{
      console.log(event)
    })
    //设置echarts数据
    //设置轴
    let xData=["福州","厦门","临沂","杭州","苏州"]
    let yData=["20000","40000","10000","30000","18000"]
    //设置配置项
    let option={
      // animation:true,
      // animationThreshold:5,//是否开启动画的阈值,当单个系列显示的图形数量大于阈值时会关闭动画
      // animationDuration:5000,//设置动画持续的时间
      // animationDelay:2000,//设置动画延迟的时间
      // animationEasing:"linear",
      title:{
        text:"城市房价"
      },
      xAxis:{//配置x轴的参数
        type:"value"
      },
      yAxis:{
        //配置y轴的参数
        data:xData,
        type:"category"//坐标轴的类型。value 数据轴 category 类目轴
      },
      series:[//系列 配置图标的类型
        {
          name:"城市房价展示",
          type:"bar",//系列类别
          barWidth:40,//设置宽度
          // color:"green",//设置轴的颜色
          itemStyle:{
            normal:{
              color:function(params){
                let colorList=['pink','red',"green","blue","yellow"]
                return colorList[params.dataIndex]
              }
            }
          },
          data:yData,
          //最大值/最小值
          markPoint:{
            data:[
              //标注的数据数组,每一个都是一个对象
              {
                type:"max",
                name:"最大值"
              },
              {
                type:"min",
                name:"最小值"
              }
            ]
          },
          //图标的标线
          markLine:{
            data:[
              {
                type:"average",//平均值
                name:"平均值"
              },
             
            ]
          }
        },
        //折线图
        {
          type:'line',//设置为折线图
          data:[20000, 30000, 19000, 35000, 25000],
        }
      ]
    }
    //绘制统计图
    myEcharts.setOption(option)
  }
}
</script>

<style>
  #demoDiv{
    width: 500px;
    height: 500px;
    border:1px solid gold;
  }
</style>

结果展示

 

四.项目开发

1.vue3.0项目环境

node.js安装 
vue脚手架安装 npm install -g @vue/cli
创建项目 vue create 项目名

2. 项目初始化

通过各种调试将页面变为空白原始状态

 

3.项目分辨率响应式分析与实施

4.项目分辨力响应式创建

下载 lib-flexble
npm install --save lib-flexible
修改flexible.js文件 修改refreshRem函数
 function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
        // var rem = width / 10;

        //修改 最小值400 最大值2560

        if (width / dpr<400) {
            width = 400 * dpr;
        }
        else if(width / dpr>2560){
            width = 2560 * dpr;
        }
        //设置成24份 1920px设计稿 1rem 就是80px
        var rem = width / 24;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }
修改main.js文件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'


//引用插件
import "lib-flexible/flexible.js"

createApp(App).use(store).use(router).mount('#app')
vscode安装该插件

 

将Root Font Size设置为80

 

5.项目头部信息条创建

<App.vue>
<template>
  
  <router-view/>
</template>

<style lang="less">
body{
  background:url("~@/assets/bg.jpg") top center no-repeat;
}
*{
  margin: 0;
  padding: 0;
  box-sizing:border-box
}
</style>
<homePage.vue>
<template>
  <div>
    <header>
      <h1>
        大数据可视化
      </h1>
    </header>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less">
  header{
    height: 1rem;
    width: 100%;
    background-color:rgba(225, 219, 219, 0.1) ;
    //标题的文字样式
    h1{
      font-size: .625rem;
      color: rgb(28, 98, 158);
      text-align: center;
      line-height: 1rem;
    }
  }
</style>

结果展示

6.页面主体创建

<homePage.vue>
<template>
  <div>
    <header>
      <h1>大数据可视化</h1>
    </header>
    <!--大容器--->
    <section class="container">
      <!--左容器-->
      <section class="itemLeft">
        <ItemPage>
          <ItemOne/>
        </ItemPage>
        <ItemPage>
          <ItemTwo/>
        </ItemPage>
      </section>
      <!--中容器-->
      <section class="itemCenter">
        <h2>地图展示</h2>

      </section>
      <!--右容器-->
      <section class="itemRight">
        <ItemPage>
          <ItemThree/>
        </ItemPage>
        <ItemPage>
          <ItemFour/>
        </ItemPage>
      </section>
    </section>
  </div>
</template>

<script>
import ItemPage from "@/components/itemPage.vue";

import itemOne from "@/components/itemOne.vue";
import itemTwo from "@/components/itemTwo.vue";
import itemThree from "@/components/itemThree.vue";
import itemFour from "@/components/itemFour.vue";
import ItemOne from "@/components/itemOne.vue";
import ItemTwo from "@/components/itemTwo.vue";
import ItemThree from "@/components/itemThree.vue";
import ItemFour from "@/components/itemFour.vue";
export default {
  components: {
    ItemPage,
    itemOne,
    itemTwo,
    itemThree,
    itemFour,
    ItemOne,
    ItemTwo,
    ItemThree,
    ItemFour
},
};
</script>

<style lang="less">
header {
  height: 1rem;
  width: 100%;
  background-color: rgba(225, 219, 219, 0.1);
  //标题的文字样式
  h1 {
    font-size: 0.625rem;
    color: rgb(28, 98, 158);
    text-align: center;
    line-height: 1rem;
  }
}
//大容器的样式
.container {
  //最大最小的宽度
  min-width: 1080px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0.125rem 0.125rem 0;
  // height: 500px;
  // background-color: gray;
  display: flex;
  //设置左右页面的份数
  .itemLeft,
  .itemRight {
    flex: 3;
  }
  .itemCenter {
    flex: 5;
    height: 10.5rem;
    border: 1px solid blue;
    padding: 0.125rem;
    margin: .25rem;
  }
}
</style>
<itemPage.vue>
<template>
  <div class="item">
   <!--设置插槽-->
   <slot></slot>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less">
.item{
    height: 5.125rem;
    border:1px solid blue;
    margin: .25rem;
    background-color: rgba(12,130,255,.85);
}
</style>
<itemxxx.vue>
//四个组件
<template>
  <div>
    <h2>图表</h2>
    <div class="echarts">
        图表的容器
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

结果展示

7.vue3.0全局引用echarts与axios

1.安装echarts
npm install --save echarts
2.安装axios
npm install --save echarts
<App.vue>
<template>
  
  <router-view/>
</template>
<script>
import {provide} from "vue"
import * as echarts from "echarts"
import axios from "axios"
export default{
  setup(){
    //provider("名字随便起","传递的内容")
    provide("echarts",echarts)
    provide("axios",axios)
    }
}
​
</script>
<style lang="less">
body{
  background:url("~@/assets/bg.jpg") top center no-repeat;
}
*{
  margin: 0;
  padding: 0;
  box-sizing:border-box
}
</style>
<homePage.vue>
<!--script-->
<script>
import ItemPage from "@/components/itemPage.vue";
​
import itemOne from "@/components/itemOne.vue";
import itemTwo from "@/components/itemTwo.vue";
import itemThree from "@/components/itemThree.vue";
import itemFour from "@/components/itemFour.vue";
import ItemOne from "@/components/itemOne.vue";
import ItemTwo from "@/components/itemTwo.vue";
import ItemThree from "@/components/itemThree.vue";
import ItemFour from "@/components/itemFour.vue";
​
import {inject} from "vue"
​
export default {
  components: {
    ItemPage,
    itemOne,
    itemTwo,
    itemThree,
    itemFour,
    ItemOne,
    ItemTwo,
    ItemThree,
    ItemFour
},
  setup(){
    let $echarts=inject("echarts")
    let $axios=inject("axios")
    console.log($echarts)
  }
};
</script>

8.后台接口创建express介绍

9.后台express路由创建

1.安装express
npm install --save express
1.创建Server文件夹,创建index.js
在index.js中设置代码
let express=require("express");
let app=express();


//引用路由文件
let chartOne=require("./router/one")
let chartTwo=require("./router/Two")
let chartThree=require("./router/Three")
let chartFour=require("./router/Four")

//使用中间件来配置路由
app.use("/one",chartOne)
app.use("/two",chartTwo)
app.use("/three",chartThree)
app.use("/four",chartFour)

app.listen(8888)

创建四个文件

 

let express=require("express");
let router=express.Router()

router.get("/data",(req,res)=>{
    res.send({
        msg:"我是one的路由地址"
    })
})

module.exports=router;

结果展示

 

10.api接口的创建

创建的json文件全部放在mock文件夹中

//one.json
{
    "chartData":[
        {"title":"冰箱","num":1827},
        {"title":"洗衣机","num":342},
        {"title":"电视机","num":541},
        {"title":"微波炉","num":1347},
        {"title":"烤箱","num":2431},
        {"title":"空调","num":876},
        {"title":"洗碗机","num":1578}
    ]
}
//two.json
{
    "chartData":{
        "day":["星期一","星期二","星期三","星期四","星期五","星期六","星期日"],
        "num":{
            "Clothes":[140,232,101,264,90,340,250],
            "digit":[120,282,111,66,340,22,100],
            "Electrical":[99,88,440,80,230,221,120],
            "gear":[220,230,80,20,880,80],
            "Chemicals":[220,302,80,150,22,90,22]
        }
    }
        
    
}
//three.json
{
    "chartData":[
        {"value":657,"name":"服饰"},
        {"value":123,"name":"数码"},
        {"value":90,"name":"家电"},
        {"value":780,"name":"家居"},
        {"value":1029,"name":"日化"},
        {"value":671,"name":"熟食"}
        
    ]
}
//four.json
{
    "chartData":{
        "day":["星期一","星期二","星期三","星期四","星期五","星期六","星期日"],
        "num":{
            "Clothes":[14,232,101,264,190,340,250],
            "digit":[10,282,111,166,340,212,100],
            "Electrical":[199,88,440,80,230,221,120],
            "gear":[220,230,180,201,880,180],
            "Chemicals":[820,302,80,150,220,90,22]
        }
    }
}
//one.js 其他四个js也如此修改
let express=require("express");
let router=express.Router()

let oneData=require("../mock/one.json")


router.get("/data",(req,res)=>{
    res.send({
        msg:"我是one的路由地址",
        chartData:oneData
    })
})

module.exports=router; 
node index.js //开启server服务

11.销量总量图表基本设置

//itemOne.vue
<template>
  <div>
    <h2>图表</h2>
    <div class="echarts" id="oneChart">图表的容器</div>
  </div>
</template>

<script>
import {inject,onMounted} from "vue"
export default {
    setup(){
        let $echarts=inject("echarts")
        let $http=inject("axios")

        async function getState(){
            let oneData=await $http({
                url:"/one/data"
            })
            console.log(oneData.data.chartData.chartData)
        }


        onMounted(()=>{
            //调用请求
            getState()
            let myChart=$echarts.init(document.getElementById("oneChart"))
            myChart.setOption({
                xAixs:{
                    type:"value"
                },
                yAixs:{
                    type:"category"
                },
                series:[
                    {
                        type:"bar"
                    }
                ]
            })
        })
        return {
          getState
        }
    }
};
</script>

<style></style>
//app.vue
<template>
  
  <router-view/>
</template>
<script>
import {provide} from "vue"
import * as echarts from "echarts"
import axios from "axios"


//设置基准路径
axios.defaults.baseURL="http://localhost:8888"
export default{
  setup(){
    //provider("名字随便起","传递的内容")
    provide("echarts",echarts)
    provide("axios",axios)
    }
}

</script>
<style lang="less">
body{
  background:url("~@/assets/bg.jpg") top center no-repeat;
}
*{
  margin: 0;
  padding: 0;
  box-sizing:border-box
}
</style>
//解决跨域 后台Server 的index.js
let express=require("express");
let app=express();
//设置跨域
app.use(function(req,res,next){
    res.header('Access-Control-Allow-Origin','*');
    res.header('Access-Control-Allow-Headers','Content-Type,Content-Length,Authorization,Accept,X-Request-With,yourHeaderFeild');
    res.header('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS');
    next();
})
​
//引用路由文件
let chartOne=require("./router/one")
let chartTwo=require("./router/Two")
let chartThree=require("./router/Three")
let chartFour=require("./router/Four")
​
//使用中间件来配置路由
app.use("/one",chartOne)
app.use("/two",chartTwo)
app.use("/three",chartThree)
app.use("/four",chartFour)
​
app.listen(8888)

11.销售总量数据处理

<itemOne.vue>
<template>
  <div>
    <h2>图表1</h2>
    <div class="echarts" id="oneChart">图表的容器</div>
  </div>
</template>
​
<script>
import {inject,onMounted,reactive} from "vue"
export default {
    setup(){
        let $echarts=inject("echarts")
        let $http=inject("axios")
​
​
        let data=reactive({})
        let xdata=reactive([])
        let ydata=reactive([])
​
        function setData(){
            xdata=data.data.chartData.chartData.map(v=>v.title)
            ydata=data.data.chartData.chartData.map(v=>v.num)
            console.log("xdata",xdata)
            console.log("ydata",ydata)
       
        }
        async function getState(){
            data=await $http({
                url:"/one/data"
            })
          
        }
​
​
        onMounted(()=>{
            let myChart=$echarts.init(document.getElementById("oneChart"))
            //调用请求
            getState().then(()=>{
                setData()
                myChart.setOption({
                xAxis:{
                    type:"value"
                },
                yAxis:{
                    type:"category",
                    data:xdata
                },
                series:[
                    {
                        type:"bar",
                        data:ydata
                    }
                ]
            })
            })
           
          
        })
        return {
          getState,data,xdata,ydata,setData
        }
    }
};
</script>
​
<style scoped>
    .echarts{
        height: 4.5rem;
    }
    h2{
        height: .6rem;
        color:#fff;
        line-height: 0.6rem;
        font-size: .25rem;
        text-align: center;
    }
</style>

12.样式优化

<template>
  <div>
    <h2>图表1</h2>
    <div class="echarts" id="oneChart">图表的容器</div>
  </div>
</template>

<script>
import { inject, onMounted, reactive } from "vue";
export default {
  setup() {
    let $echarts = inject("echarts");
    let $http = inject("axios");

    let data = reactive({});
    let xdata = reactive([]);
    let ydata = reactive([]);

    function setData() {
      xdata = data.data.chartData.chartData.map((v) => v.title);
      ydata = data.data.chartData.chartData.map((v) => v.num);
      console.log("xdata", xdata);
      console.log("ydata", ydata);
    }
    async function getState() {
      data = await $http({
        url: "/one/data",
      });
    }

    onMounted(() => {
      let myChart = $echarts.init(document.getElementById("oneChart"));
      //调用请求
      getState().then(() => {
        setData();
        myChart.setOption({
        grid:{
            top:"3%",
            left:"1%",
            right:"6%",
            bottom:"3%",
            containLabel:true
        },
          xAxis: {
            type: "value",
          },
          yAxis: {
            type: "category",
            data: xdata,
          },
          series: [
            {
              type: "bar",
              data: ydata,
              itemStyle: {//设置图形颜色
                normal: {
                    barBorderRadius:[0,20,20,0],//设置圆角
                  color: new $echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: "#005eaa",
                    },
                    {
                      offset: 0.5,
                      color: "#339ca8",
                    },
                    {
                      offset: 1,
                      color: "#cda819",
                    },
                  ]),
                },
              },
            },
          ],
        });
      });
    });
    return {
      getState,
      data,
      xdata,
      ydata,
      setData,
    };
  },
};
</script>

<style scoped>
.echarts {
  height: 4.5rem;
}
h2 {
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  font-size: 0.25rem;
  text-align: center;
}
</style>

结果展示

 

13.地图展示

//mapPage.vue
<template>
  <div class="map" id="map">

  </div>
</template>

<script>
import axios from "axios"
import {onMounted,reactive,inject} from "vue";
export default {
    setup(){
        let $echarts = inject("echarts");
        let mapData=reactive({})
        async function getState(){
            mapData=await axios.get("http://localhost:8080/map/china.json")
        }

        onMounted(()=>{
            getState().then(()=>{
                console.log("map",mapData)
                $echarts.registerMap("China",mapData.data)
                let mapchart=$echarts.init(document.getElementById("map"))
                mapchart.setOption(
                    {
                        geo:{
                            map:"China"
                        }
                    }
                )
           
           
            })
        })
        return {
            getState,mapData
        }
    }
}
</script>

<style>
.map{
    width: 100%;
    height: 100%;
}
</style>

结果展示

 

14.地图样式设置

//mapPage
<template>
  <div class="map" id="map">

  </div>
</template>

<script>
import axios from "axios"
import {onMounted,reactive,inject} from "vue";
export default {
    setup(){
        let $echarts = inject("echarts");
        let mapData=reactive({})
        async function getState(){
            mapData=await axios.get("http://localhost:8080/map/china.json")
        }

        onMounted(()=>{
            getState().then(()=>{
                console.log("map",mapData)
                $echarts.registerMap("China",mapData.data)
                let mapchart=$echarts.init(document.getElementById("map"))
                mapchart.setOption(
                    {
                        geo:{
                            map:"China",
                            itemStyle:{
                                areaColor:"#0099ff",
                                borderColor:"00ffff",
                                shadowColor:"rgba(230,130,70,0.5)",
                                shadowBlur:30,
                                emphasis:{
                                    focus:"self"
                                }
                            }
                        }
                    }
                )
           
           
            })
        })
        return {
            getState,mapData
        }
    }
}
</script>

<style>
.map{
    width: 100%;
    height: 100%;
}
</style>

15.地图上设置散点图标记点

//mapPage.vue
<template>
  <div class="map" id="map">

  </div>
</template>

<script>
import axios from "axios"
import {onMounted,reactive,inject} from "vue";
export default {
    setup(){
        let $echarts = inject("echarts");
        let mapData=reactive({})
        async function getState(){
            mapData=await axios.get("http://localhost:8080/map/china.json")
        }

        onMounted(()=>{
            getState().then(()=>{
                console.log("map",mapData)
                $echarts.registerMap("China",mapData.data)
                let mapchart=$echarts.init(document.getElementById("map"))
                mapchart.setOption(
                    {
                        geo:{
                            map:"China",
                            itemStyle:{
                                areaColor:"#0099ff",
                                borderColor:"00ffff",
                                shadowColor:"rgba(230,130,70,0.5)",
                                shadowBlur:30,
                                emphasis:{
                                    focus:"self"
                                }
                            }
                        },
                        tooltip:{
                            trigger:"item"
                        },
                        series:[
                            {
                            type:"scatter",
                            itemStyle:{
                                color:"gold"
                            },
                            coordinateSystem:"geo",
                            data:[
                                 {name:"北京市",value:[116.46,39.92,4367]},
                                 {name:"福州市",value:[119.307494,26.082506,3456]},
                                 {name:"临沂市",value:[118.364687,35.10642,1890]},
                                 {name:"青岛市",value:[120.391758,36.074094,3456]},
                                 {name:"厦门市",value:[118.130355,24.47541,8888]}
                            ]
                            }
                        ]
                    }
                )
           
           
            })
        })
        return {
            getState,mapData
        }
    }
}
</script>

<style>
.map{
    width: 100%;
    height: 100%;
}
</style>

16.地图视觉映射效果

//mapPage.vue
<template>
  <div class="map" id="map"></div>
</template>

<script>
import axios from "axios"
import {onMounted,reactive,inject} from "vue";
export default {
    setup(){
        let $echarts = inject("echarts");
        let mapData=reactive({})
        async function getState(){
            mapData=await axios.get("http://localhost:8080/map/china.json")
        }

        onMounted(()=>{
            getState().then(()=>{
                console.log("map",mapData)
                $echarts.registerMap("China",mapData.data)
                let mapchart=$echarts.init(document.getElementById("map"))
                mapchart.setOption(
                    {
                        geo:{
                            map:"China",
                            itemStyle:{
                                areaColor:"#0099ff",
                                borderColor:"00ffff",
                                shadowColor:"rgba(230,130,70,0.5)",
                                shadowBlur:30,
                                emphasis:{
                                    focus:"self"
                                }
                            }
                        },
                        tooltip:{
                            trigger:"item"
                        },
                        title:{
                           text:"城市销量",
                           left:"45%",
                           textStyle:{
                            color:"#fff",
                            fontSize:20,
                            textShadowBlur:10,
                            textShadowColor:"#33ffff"
                           }
                        },
                        visualMap:{
                            type:"continuous",
                            min:100,
                            max:6000,
                            calculable:true,
                            inRange:{
                               color: ["#50a3ba","#eac736","#d94e5d"]
                        },
                        textStyle:{
                            color:"#fff"
                        }
                        },
                        series:[
                            {
                            type:"scatter",
                            itemStyle:{
                                color:"gold"
                            },
                            coordinateSystem:"geo",
                            symbolSize: 30,
                            data:[
                                 {name:"北京市",value:[116.46,39.92,4367]},
                                 {name:"福州市",value:[119.307494,26.082506,3456]},
                                 {name:"临沂市",value:[118.364687,35.10642,1890]},
                                 {name:"青岛市",value:[120.391758,36.074094,3456]},
                                 {name:"厦门市",value:[118.130355,24.47541,8888]}
                            ]
                            }
                        ]
                    }
                )


            })
        })
        return {
            getState,mapData
        }
    }
}
</script>

<style>
.map {
  width: 100%;
  height: 100%;
}
</style>

结果展示

 

17.产品库存统计图设置

//itemThree.vue
<template>
  <div>
    <h2>库存统计</h2>
    <div class="echarts" id="ethree">图表的容器</div>
  </div>
</template>
​
<script>
import { inject, onMounted, reactive } from "vue";
export default {
  setup() {
    let $echarts = inject("echarts");
    let $http = inject("axios");
    let data = reactive({});
​
    async function getState() {
      data = await $http({
        url: "/three/data",
      });
    }
    onMounted(() => {
      getState().then(() => {
        console.log("饼状图", data);
        let mychart = $echarts.init(document.getElementById("ethree"));
        mychart.setOption({
          legend: {
            top: "bottom",
          },
          tooltip: {
            show: true,
          },
          series: [
            {
              type: "pie",
              data: data.data.chartData.chartData,
              radius: [10, 100],
              center: ["50%", "45%"],
              roseType: "area",
              itemStyle: {
                borderRadius: 10,
              },
            },
          ],
        });
      });
    });
​
    return {
      getState,
      data,
    };
  },
};
</script>
​
<style>
.echarts {
  height: 4.5rem;
}
h2 {
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  font-size: 0.25rem;
  text-align: center;
}
</style>

结果展示

 

18.产品月销量统计图基本设置

//itemTwo
<template>
    <div>
      <h2>库存统计</h2>
      <div class="echarts" id="etwo">图表的容器</div>
    </div>
  </template>
  
  <script>
  import { inject, onMounted, reactive } from "vue";
  export default {
    setup() {
      let $echarts = inject("echarts");
      let $http = inject("axios");
      let data = reactive({});
  
      async function getState() {
        data = await $http({
          url: "/two/data",
        });
      }
      onMounted(() => {
        getState().then(() => {
          console.log("aaa", data);
          let mychart = $echarts.init(document.getElementById("etwo"));
          mychart.setOption({
          
            xAxis:{
                type:"category",
                boundaryGap:false,
                data:data.data.chartData.chartData.day
            },
            yAxis:{
                type:"value",
            },
            series:[
                {
                    name:"服饰",
                    type:"line",
                    data:data.data.chartData.chartData.num.Clothes
                },
                {
                    name:"数码",
                    type:"line",
                    data:data.data.chartData.chartData.num.Chemicals
                },
                {
                    name:"家电",
                    type:"line",
                    data:data.data.chartData.chartData.num.Electrical
                },
                {
                    name:"家居",
                    type:"line",
                    data:data.data.chartData.chartData.num.digit
                },
                {
                    name:"日化",
                    type:"line",
                    data:data.data.chartData.chartData.num.gear
                },
            ]
          });
        });
      });
  
      return {
        getState,
        data,
      };
    },
  };
  </script>
  
  <style>
  .echarts {
    height: 4.5rem;
  }
  h2 {
    height: 0.6rem;
    color: #fff;
    line-height: 0.6rem;
    font-size: 0.25rem;
    text-align: center;
  }
  </style>
  

结果展示

 

19.月销量图样式设置

//itemtwo
<template>
    <div>
      <h2>周销图</h2>
      <div class="echarts" id="etwo">图表的容器</div>
    </div>
  </template>
  
  <script>
  import { inject, onMounted, reactive } from "vue";
  export default {
    setup() {
      let $echarts = inject("echarts");
      let $http = inject("axios");
      let data = reactive({});
  
      async function getState() {
        data = await $http({
          url: "/two/data",
        });
      }
      onMounted(() => {
        getState().then(() => {
          console.log("aaa", data);
          let mychart = $echarts.init(document.getElementById("etwo"));
          mychart.setOption({
          
            xAxis:{
                type:"category",
                boundaryGap:false,
                data:data.data.chartData.chartData.day
            },
            yAxis:{
                type:"value",
            },
            series:[
                {
                    stack:"Total",
                    showSymbol:false,
                    lineStyle:{
                        width:0
                    },
                    emphasis:{
                        focus:"series"
                    },
                    areaStyle:{
                        opacity:0.8,
                        color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
                            offset:0,
                            color:"rgb(128,255,265)",
                        },
                        {
                            offset:1,
                            color:"rgb(1,191,236)"
                        }])
                    },
                    smooth:true,
                    name:"服饰",
                    type:"line",
                    data:data.data.chartData.chartData.num.Clothes
                },
                {
                    stack:"Total",
                    showSymbol:false,
                    lineStyle:{
                        width:0
                    },
                    emphasis:{
                        focus:"series"
                    },
                    areaStyle:{
                        opacity:0.8,
                        color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
                            offset:0,
                            color:"rgb(0,221,255)",
                        },
                        {
                            offset:1,
                            color:"rgb(77,119,255)"
                        }])
                    },
                    smooth:true,
                    name:"数码",
                    type:"line",
                    data:data.data.chartData.chartData.num.Chemicals
                },
                {
                    stack:"Total",
                    showSymbol:false,
                    lineStyle:{
                        width:0
                    },
                    emphasis:{
                        focus:"series"
                    },
                    areaStyle:{
                        opacity:0.8,
                        color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
                            offset:0,
                            color:"rgb(55,162,255)",
                        },
                        {
                            offset:1,
                            color:"rgb(116,21,219)"
                        }])
                    },
                    smooth:true,
                    name:"家电",
                    type:"line",
                    data:data.data.chartData.chartData.num.Electrical
                },
                {
                    smooth:true,
                    stack:"Total",
                    showSymbol:false,
                    lineStyle:{
                        width:0
                    },
                    emphasis:{
                        focus:"series"
                    },
                    areaStyle:{
                        opacity:0.8,
                        color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
                            offset:0,
                            color:"rgb(255,0,135)",
                        },
                        {
                            offset:1,
                            color:"rgb(135,0,157)"
                        }])
                    },
                    name:"家居",
                    type:"line",
                    data:data.data.chartData.chartData.num.digit
                },
                {
                    stack:"Total",
                    showSymbol:false,
                    lineStyle:{
                        width:0
                    },
                    emphasis:{
                        focus:"series"
                    },
                    areaStyle:{
                        opacity:0.8,
                        color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
                            offset:0,
                            color:"rgb(255,191,0)",
                        },
                        {
                            offset:1,
                            color:"rgb(224,623,236)"
                        }])
                    },
                    smooth:true,
                    name:"日化",
                    type:"line",
                    data:data.data.chartData.chartData.num.gear
                },
            ]
          });
        });
      });
  
      return {
        getState,
        data,
      };
    },
  };
  </script>
  
  <style>
  .echarts {
    height: 4.5rem;
  }
  h2 {
    height: 0.6rem;
    color: #fff;
    line-height: 0.6rem;
    font-size: 0.25rem;
    text-align: center;
  }
  </style>
  

结果展示

20.月销图优化

//itemtwo.vue
<template>
    <div>
      <h2>周销图</h2>
      <div class="echarts" id="etwo">图表的容器</div>
    </div>
  </template>
  
  <script>
  import { inject, onMounted, reactive } from "vue";
  export default {
    setup() {
      let $echarts = inject("echarts");
      let $http = inject("axios");
      let data = reactive({});
  
      async function getState() {
        data = await $http({
          url: "/two/data",
        });
      }
      onMounted(() => {
        getState().then(() => {
          console.log("aaa", data);
          let mychart = $echarts.init(document.getElementById("etwo"));
          mychart.setOption({
            tooltip:{
                trigger:"axis",
                axisPointer:{
                    type:"cross",
                    label:{
                        backgroundColor:"#e6b600"
                    }
                }
            },
            legend:{
                data:["服饰","数码","家电","家居","日化"]
            },
            grid:{
                left:"1%",
                right:"4%",
                bottom:"3%",
                containLabel:true
            },
            xAxis:{
                type:"category",
                boundaryGap:false,
                data:data.data.chartData.chartData.day,
                axisLine:{
                        lineStyle:{
                            color:"#fff"
                        }
                    }
            },
            yAxis:{
                type:"value",
                axisLine:{
                        lineStyle:{
                            color:"#fff"
                        }
                    }
            },
            series:[
                {
                    stack:"Total",
                    showSymbol:false,
                    lineStyle:{
                        width:0
                    },
                    emphasis:{
                        focus:"series"
                    },
                    areaStyle:{
                        opacity:0.8,
                        color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
                            offset:0,
                            color:"rgb(128,255,265)",
                        },
                        {
                            offset:1,
                            color:"rgb(1,191,236)"
                        }])
                    },
                    smooth:true,
                    name:"服饰",
                    type:"line",
                    data:data.data.chartData.chartData.num.Clothes
                },
                {
                    stack:"Total",
                    showSymbol:false,
                    lineStyle:{
                        width:0
                    },
                    emphasis:{
                        focus:"series"
                    },
                    areaStyle:{
                        opacity:0.8,
                        color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
                            offset:0,
                            color:"rgb(0,221,255)",
                        },
                        {
                            offset:1,
                            color:"rgb(77,119,255)"
                        }])
                    },
                    smooth:true,
                    name:"数码",
                    type:"line",
                    data:data.data.chartData.chartData.num.Chemicals,
                  
                },
                {
                    stack:"Total",
                    showSymbol:false,
                    lineStyle:{
                        width:0
                    },
                    emphasis:{
                        focus:"series"
                    },
                    areaStyle:{
                        opacity:0.8,
                        color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
                            offset:0,
                            color:"rgb(55,162,255)",
                        },
                        {
                            offset:1,
                            color:"rgb(116,21,219)"
                        }])
                    },
                    smooth:true,
                    name:"家电",
                    type:"line",
                    data:data.data.chartData.chartData.num.Electrical
                },
                {
                    smooth:true,
                    stack:"Total",
                    showSymbol:false,
                    lineStyle:{
                        width:0
                    },
                    emphasis:{
                        focus:"series"
                    },
                    areaStyle:{
                        opacity:0.8,
                        color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
                            offset:0,
                            color:"rgb(255,0,135)",
                        },
                        {
                            offset:1,
                            color:"rgb(135,0,157)"
                        }])
                    },
                    name:"家居",
                    type:"line",
                    data:data.data.chartData.chartData.num.digit
                },
                {
                    stack:"Total",
                    showSymbol:false,
                    lineStyle:{
                        width:0
                    },
                    emphasis:{
                        focus:"series"
                    },
                    areaStyle:{
                        opacity:0.8,
                        color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
                            offset:0,
                            color:"rgb(255,191,0)",
                        },
                        {
                            offset:1,
                            color:"rgb(224,623,236)"
                        }])
                    },
                    smooth:true,
                    name:"日化",
                    type:"line",
                    data:data.data.chartData.chartData.num.gear
                },
            ]
          });
        });
      });
  
      return {
        getState,
        data,
      };
    },
  };
  </script>
  
  <style>
  .echarts {
    height: 4.5rem;
  }
  h2 {
    height: 0.6rem;
    color: #fff;
    line-height: 0.6rem;
    font-size: 0.25rem;
    text-align: center;
  }
  </style>
  

结果展示

 

 

21.产品库存统计图

//itemFour.vue
<template>
    <div>
      <h2>库存统计图</h2>
      <div class="echarts" id="efour"></div>
    </div>
  </template>
  
  <script>
  import { inject, onMounted, reactive } from "vue";
  export default {
    setup() {
      let $echarts = inject("echarts");
      let $http = inject("axios");
      let data = reactive({});
  
      async function getState() {
        data = await $http({
          url: "/four/data",
        });
      }
      onMounted(() => {
        getState().then(() => {
          console.log("bbb", data);
          let mychart = $echarts.init(document.getElementById("efour"));
          mychart.setOption({
            xAxis:{
                type:"category",
                data:data.data.chartData.chartData.day
            },
            yAxis:{
                type:"value"
            },
            series:[
                {
                    name:"服饰",
                    type:"bar",
                    data:data.data.chartData.chartData.num.Chemicals
                }
            ]
          });
        });
      });
  
      return {
        getState,
        data,
      };
    },
  };
  </script>
  
  <style>
  .echarts {
    height: 4.5rem;
  }
  h2 {
    height: 0.6rem;
    color: #fff;
    line-height: 0.6rem;
    font-size: 0.25rem;
    text-align: center;
  }
  </style>
  

22.库存统计图堆叠效果

//itemfour.vue
<template>
    <div>
      <h2>库存统计图</h2>
      <div class="echarts" id="efour"></div>
    </div>
  </template>
  
  <script>
  import { inject, onMounted, reactive } from "vue";
  export default {
    setup() {
      let $echarts = inject("echarts");
      let $http = inject("axios");
      let data = reactive({});
  
      async function getState() {
        data = await $http({
          url: "/four/data",
        });
      }
      onMounted(() => {
        getState().then(() => {
          console.log("bbb", data);
          let mychart = $echarts.init(document.getElementById("efour"));
          mychart.setOption({
            xAxis:{
                type:"category",
                data:data.data.chartData.chartData.day
            },
            yAxis:{
                type:"value"
            },
            series:[
                {
                    name:"服饰",
                    type:"bar",
                    data:data.data.chartData.chartData.num.Chemicals,
                    stack:"total"
                
                },
                {
                    name:"家电",
                    type:"bar",
                    data:data.data.chartData.chartData.num.Clothes,
                    stack:"total"
                
                },
                {
                    name:"家居",
                    type:"bar",
                    data:data.data.chartData.chartData.num.Electrical,
                    stack:"total"
                
                },
​
                {
                    name:"数码",
                    type:"bar",
                    data:data.data.chartData.chartData.num.digit,
                    stack:"total"
                
                },
                {
                    name:"日化",
                    type:"bar",
                    data:data.data.chartData.chartData.num.gear,
                    stack:"total"
                
                },
            ]
          });
        });
      });
  
      return {
        getState,
        data,
      };
    },
  };
  </script>
  
  <style>
  .echarts {
    height: 4.5rem;
  }
  h2 {
    height: 0.6rem;
    color: #fff;
    line-height: 0.6rem;
    font-size: 0.25rem;
    text-align: center;
  }
  </style>
  

23.样式优化

//itemfour.vue
<template>
    <div>
      <h2>库存统计图</h2>
      <div class="echarts" id="efour"></div>
    </div>
  </template>
  
  <script>
  import { inject, onMounted, reactive } from "vue";
  export default {
    setup() {
      let $echarts = inject("echarts");
      let $http = inject("axios");
      let data = reactive({});
  
      async function getState() {
        data = await $http({
          url: "/four/data",
        });
      }
      onMounted(() => {
        getState().then(() => {
          console.log("bbb", data);
          let mychart = $echarts.init(document.getElementById("efour"));
          mychart.setOption({
            grid:{
                left:"3%",
                right:"4%",
                bottom:"3%",
                containLabel:true
            },
            xAxis:{
                type:"category",
                data:data.data.chartData.chartData.day,
                axisLine:{
                        lineStyle:{
                            color:"#fff"
                        }
                    }
            },
            yAxis:{
                type:"value",
                axisLine:{
                        lineStyle:{
                            color:"#fff"
                        }
                    }
            },
            legend:{},
            tooltip:{
                trigger:"axis",
                axisPointer:{
                    type:"shadow"
                }
                
            },
            series:[
                {
                    name:"服饰",
                    type:"bar",
                    data:data.data.chartData.chartData.num.Chemicals,
                    stack:"total",
                    label:{
                        show:true
                    },
                    emphasis:{
                        focus:"series"
                    }
                
                },
                {
                    name:"家电",
                    type:"bar",
                    data:data.data.chartData.chartData.num.Clothes,
                    stack:"total",
                    label:{
                        show:true
                    },
                    emphasis:{
                        focus:"series"
                    }
                
                },
                {
                    name:"家居",
                    type:"bar",
                    data:data.data.chartData.chartData.num.Electrical,
                    stack:"total",
                    label:{
                        show:true
                    },
                    emphasis:{
                        focus:"series"
                    }
                
                },
​
                {
                    name:"数码",
                    type:"bar",
                    data:data.data.chartData.chartData.num.digit,
                    stack:"total",
                    label:{
                        show:true
                    },
                    emphasis:{
                        focus:"series"
                    }
                
                },
                {
                    name:"日化",
                    type:"bar",
                    data:data.data.chartData.chartData.num.gear,
                    stack:"total",
                    label:{
                        show:true
                    },
                    emphasis:{
                        focus:"series"
                    }
                
                },
            ]
          });
        });
      });
  
      return {
        getState,
        data,
      };
    },
  };
  </script>
  
  <style>
  .echarts {
    height: 4.5rem;
  }
  h2 {
    height: 0.6rem;
    color: #fff;
    line-height: 0.6rem;
    font-size: 0.25rem;
    text-align: center;
  }
  </style>
  

结果展示

 

 

24.项目打包

本人博客:解决vue打包之后空白问题和路由问题_浩淇害死猫的博客-CSDN博客_vue打包后页面空白

然后npm run build

25.地图设置与打包

结果展示

 

Logo

前往低代码交流专区

更多推荐