在vue中使用echarts 及echarts 基本属性

在vue中使用 echarts

直接引人 echarts

安装 echarts 项目依赖

npm install echarts --save
<!-- 或者 -->
npm install echarts -S

全局引入

我们安装完成之后，可以在 main.js 中全局引入 echarts

import echarts from "echarts";
Vue.prototype.$echarts = echarts;

创建图表

<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>
export default {
  name: "app",
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {},
        legend: {
          data: ["销量"]
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  mounted() {
    this.drawChart();
  }
};
</script>

echarts 基本属性

数据可视化

• 数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息
• 数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理

案例适配方案

• 设计稿是 1920 px
  1. flexible.js 把屏幕分成 24 等
     
     npm i lib-flexible --save-dev
  2. cssrem 插件的基准值是 80px

  插件-配置按钮-配置扩展设置-Root Font Size 里面设置

electronicFont 图标字体

Echarts

echarts，一个使用 javascript 实现的开源可视化库，可以流畅地运行在 PC 和移动设备上，兼容绝大部分浏览器，底层依赖矢量图形库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表

option 配置项

基础配置

• title 设置图表的标题
• tooltip 图表的提示框组件
  1. trigger 触发方式
• legend 图例组件
• toolbox 工具箱组件
• grid 网格配置
  1. containLabel 是否显示刻度
• xAxis 设置 x 轴的相关配置
• yAxis 设置 y 轴的相关配置
• serves 系列表图配置 决定显示那种类型的图表
• color 设置线条的颜色

柱状图

• 修改柱子颜色

color:'颜色'

• 修改图表大小

grid:{
    left:'%',
    top:'px',
    right:'',
    bottom:'',
    <!--刻度标签-->
    containLabel:true
}

• 修改 轴 标签文字样式

<!--x轴的文字颜色大小-->
axisLabel:{
    color:'',
    fontSize:''
},
<!--x轴样式不显示-->
axisLine:{
    show:false
    <!--如果想要设置单独的线条样式-->
    lineStyle:{
        color:'',
        width:'',
        type:'solid'
    }
},
<!--不显示相关的刻度-->
axisTick:{
    show:false
}

• 轴 分割线样式

splitLine:{
    lineStyle:{
        color:'',
        width:'',
        type:'solid'
    }
}

• 修改圆角以及柱子宽度

series:[
    {
        <!--修改柱子宽度-->
        barWidth:'',
        <!--修改柱子之间的距离-->
        barCategoryGap:50,
        itemStyle:{
            <!--修改圆角-->
            barBorderRadius:5,
            <!--设置柱子颜色 每个柱子颜色都不相同-->
            color:function(params){
                return myColor[params.dataIndex];
            }
        }
    }
]

• 坐标轴指示器

tooltip:{
    axisPointer:{
        <!--默认为直线，可选为'line'\'shadow' 阴影-->
        type:'shadow'
    }
}

• 图形上的文本标签

label:{
    normal:{
        show:true,
        <!--图形内显示-->
        position:'inside',
        <!--文字的显示方式-->
        <!--c 会自动解析为数据-->
        formatter:'{c}%'
    }
}

• 把柱子变成框

series:[
    {
        <!--修改柱子宽度-->
        barWidth:'',
        <!--修改柱子之间的距离-->
        barCategoryGap:50,
        <!--把柱子变成框-->
        itemStyle:{
            color:'none',
            borderColor:'',
            borderWidth:3,
            <!--修改圆角-->
            barBorderRadius:5,
        }
    }
]

• 设置两组柱子的层叠

<!--给series 第一个对象里面的 添加-->
xAxiosIndex:0,
<!--给series 第二个对象里面的 添加-->
yAxiosIndex:1,

• yAxis.inverse 是否是反向坐标轴

图表跟随屏幕自动的去适应

window.addEventListener('resize',function(){
    myChat.resize()
})

折线图

• 设置网格样式

grid:{
    <!--统计图大小-->
    top:'',
    left:'',
    right:'',
    bottom:'',
    <!--显示边框-->
    show:true,
    <!--边框颜色-->
    borderColor:''
    <!--包含刻度文字在内-->
    containLabel:true 
}

• 图例组件

legend:{
    textStyle:{
        <!--图例文字颜色-->
        color:''
    },
    <!--图例位置-->
    top:'',
    right:''
}

• 去除 轴内间距

boundaryGap:false

• 折线修饰为圆滑

series:{
    <!--折线修饰为圆滑-->
    smnoth:true
}

• 线模块的配置

serves:{
    <!--单独修改线的样式-->
    lineStyle:{
        color:'',
        width:''
    },
    <!--填充区域-->
    areaStyle:{
        <!--渐变色-->
        color:new echarts.graphic.LinearGradient(
            0,0,0,1,
            [
                {
                    offset:0,
                    <!--渐变色的起始颜色-->
                    color:'rgba(1,132,213,0.4)'
                },
                {
                    offset:0.8,
                    <!--渐变色的结束颜色-->
                    color:'rgba(1,132,213,0)'
                }
            ],
            false
        )
    }
}

• 设置拐点

serves:{
    <!--设置拐点小圆点-->
    symbol:'circle',
    <!--拐点大小-->
    symbolSize:5,
    <!--设置拐点颜色以及边框-->
    itemStyle:{
        color:'',
        <!--边框颜色-->
        borderColor:''
        <!--边框大小-->
        borderWidth:12
    },
    <!--开始不显示拐点，鼠标经过显示-->
    showSymobol:false
}

饼状图

• 图例组件

legend:{
    <!--距离底部-->
    bottom:'',
    <!--小图标的宽度和高度-->
    itemWidth:10,
    itemHeight:10,
    <!--修改图例组件的文字-->
    textStyle:{
        color:'',
        fontSize:''
    }
}

• 图大小，位置

serves:{
    {
        <!--设置饼形图在容器中的位置-->
        center:['50%','50%'],
        <!--修改内圈半径和外圈半径，百分比是相对于容器宽度来说的-->
        radius:['40%','60%']
        <!--不显示标签文字-->
        label:{show:false},
        <!--不显示连接线-->
        labelLine:{show:false}
    }
}

南丁格尔玫瑰图

• 显示模式修改

<!--面积模式 area-->
<!--半径模式-->
roseType:'radius'

• 连接线

labelLine:{
    length:50,
    length:50
}