vue用echarts图表（柱状图）

作者: zlf_j | 来源:发表于2019-05-29 17:40 被阅读0次

vue用echarts图表（柱状图）
vue图表ehchart和富文本编辑器的使用
React-Echarts-通用配置
Echarts tooltip超出div，展示不全问题解决
Vue项目中使用Echarts创建图表
echarts柱状图阴影区域点击事件
vue + eCharts 实例
echarts tab切换默认宽度100px的问题
vue-cli+v-charts实现可视化图表
Java笔记-Gson在解析包含单个字母的驼峰式变量遇到的一个小

安装：

npm install echarts -S
https://www.cnblogs.com/Smiled/p/7686316.html

使用：

<template>
  <div id="statistics">
    <div id="chart_example"></div>
    <div id="chart_example2"></div>
</div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    data () {
      return {
        submitApprovalData: [23, 12, 12, 23, 12],
        approvalPassData: [12, 23, 16, 21, 16],
        totalData: []
      }
    },
    methods: {
    },
    mounted () {
    },
    created () {
      this.totalData = []
      this.submitApprovalData.forEach((item, index) => {
        this.totalData.push(item + this.approvalPassData[index])
      })
      let this_ = this
      setTimeout((function () {
        let chart = document.getElementById('chart_example')
        let chart2 = document.getElementById('chart_example2')
        let myChart = echarts.init(chart)
        let myChart2 = echarts.init(chart2)
        let option = {
          color: ['#fff'],
          backgroundColor: 'rgba(47,58,102,1)', // 背景色
          xAxis : [
            {
              name: '任务难度', // x轴标题
              type : 'category',
              data : ['S', 'A', 'B', 'C', 'D'],
              axisTick: {
                alignWithLabel: true
              },
              axisLine: { //坐标线
                lineStyle: {
                  type: 'dashed',
                  color: '#48558C', // 轴线的颜色
                  width: '1' // 坐标线的宽度
                }
              },
              axisTick: { // 刻度
                show: false // 不显示刻度线
              },
              nameTextStyle: { // 标题样式
                color: ['#fff']
              },
              axisLabel: {
                textStyle: {
                  color: '#fff', // 坐标值得具体的颜色
                  fontSize: 14
                }
              }
            }
          ],
          yAxis : [
            {
              name: '任务数量',
              type : 'value',
              axisLine: { // 线
                show: false
              },
              axisTick: { // 刻度
                show: false
              },
              splitLine: { // 网格为虚线
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: '#48558C'
                }
              },
              nameTextStyle: {
                color: ['#fff']
              },
              axisLabel: {
                textStyle: {
                  color: '#fff', // 坐标值得具体的颜色
                  fontSize: 14
                }
              }
            }
          ],
          grid: { // 设置图标边距
            left: '5%',
            right: '15%',
            bottom: '5%',
            containLabel: true
          },
          legend: {
            selectedMode: false, // 取消图例上的点击事件
            icon: 'circle', // 图例为圆形
            right: 15,
            top: 10,
            orient: 'vertical', // 纵列分布
            itemWidth: 10, // 图例图标的宽
            itemHeight: 10, // 图例图标的高
            textStyle: {
              fontSize: 12,
              color: '#fff' // 值的具体的颜色
            }
          },
          series : [
            {
              name: '周一',
              type: 'bar',
              barWidth: '20', // 设置宽度
              stack: '任务数量', // 名称一致的则叠加
              data: this_.submitApprovalData,
              itemStyle: {
                normal: {
                  color: '#5E76D7', // 设置柱子颜色
                  label: {
                    show: true, // 柱子上显示值
                    position: 'inside', // 值在柱子上方显示
                    textStyle: {
                      color: '#fff' // 值得颜色
                    }
                  }
                }
              }
            }, {
              name: '周二',
              type: 'bar',
              barWidth: '20',
              stack: '任务数量',
              data: this_.approvalPassData,
              itemStyle: {
                normal: {
                  color: '#212948', // 设置柱子颜色
                  label: {
                    show: true, // 柱子上显示值
                    position: 'inside', // 值在柱子内部显示
                    textStyle: {
                      color: '#fff' // 值得颜色
                    }
                  }
                }
              }
            }, {
              name: '', // 名称为空，则不显示图例
              type: 'bar',
              stack: '任务数量',
              label: {
                normal: {
                  offset:['50', '80'],
                  show: true,
                  position: 'insideBottom', // 显示总数
                  formatter: '{c}',
                  textStyle: { color: '#fff' }
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgba(193,35,43,0)' // 不显示总数的柱状图
                }
              },
              data: this_.totalData // 总数的数据，自己算
            }
          ]
        }
        let option2 = {
          color: ['#fff'],
          backgroundColor: 'rgba(47,58,102,1)', // 背景色
          xAxis : [
            {
              name: '任务难度', // x轴标题
              type : 'category',
              data : ['S', 'A', 'B', 'C', 'D'],
              axisTick: {
                alignWithLabel: true
              },
              axisLine: { //坐标线
                lineStyle: {
                  type: 'dashed',
                  color: '#48558C', // 轴线的颜色
                  width: '1' // 坐标线的宽度
                }
              },
              axisTick: { // 刻度
                show: false // 不显示刻度线
              },
              nameTextStyle: { // 标题样式
                color: ['#fff']
              },
              axisLabel: {
                textStyle: {
                  color: '#fff', // 坐标值得具体的颜色
                  fontSize: 14
                }
              }
            }
          ],
          yAxis : [
            {
              name: '任务数量',
              type : 'value',
              axisLine: { // 线
                show: false
              },
              axisTick: { // 刻度
                show: false
              },
              splitLine: { // 网格为虚线
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: '#48558C'
                }
              },
              nameTextStyle: {
                color: ['#fff']
              },
              axisLabel: {
                textStyle: {
                  color: '#fff', // 坐标值得具体的颜色
                  fontSize: 14
                }
              }
            }
          ],
          grid: { // 设置图标边距
            left: '5%',
            right: '15%',
            bottom: '5%',
            containLabel: true
          },
          legend: {
            selectedMode: false, // 取消图例上的点击事件
            icon: 'circle', // 图例为圆形
            right: 15,
            top: 10,
            orient: 'vertical', // 纵列分布
            itemWidth: 10, // 图例图标的宽
            itemHeight: 10, // 图例图标的高
            textStyle: {
              fontSize: 12,
              color: '#fff' // 值的具体的颜色
            }
          },
          series : [
            {
              name: '周一',
              type: 'bar',
              barWidth: '20', // 设置宽度
              stack: '任务数量', // 名称一致的则叠加
              data: this_.submitApprovalData,
              itemStyle: {
                normal: {
                  color: '#212948', // 设置柱子颜色
                  label: {
                    show: true, // 柱子上显示值
                    position: 'inside', // 值在柱子上方显示
                    textStyle: {
                      color: '#fff' // 值得颜色
                    }
                  }
                }
              }
            }, {
              name: '周二',
              type: 'bar',
              barWidth: '20',
              stack: '任务数量',
              data: this_.approvalPassData,
              itemStyle: {
                normal: {
                  color: '#5E76D7', // 设置柱子颜色
                  label: {
                    show: true, // 柱子上显示值
                    position: 'inside', // 值在柱子内部显示
                    textStyle: {
                      color: '#fff' // 值得颜色
                    }
                  }
                }
              }
            }, {
              name: '周三',
              type: 'bar',
              barWidth: '20',
              stack: '任务数量',
              data: this_.submitApprovalData,
              itemStyle: {
                normal: {
                  color: '#89A0FF', // 设置柱子颜色
                  label: {
                    show: true, // 柱子上显示值
                    position: 'inside', // 值在柱子内部显示
                    textStyle: {
                      color: '#fff' // 值得颜色
                    }
                  }
                }
              }
            }, {
              name: '平均/日',
              type: 'bar',
              barWidth: '20',
              barCategoryGap: 10,
              data: this_.approvalPassData,
              itemStyle: {
                normal: {
                  color: '#84B5EE', // 设置柱子颜色
                  label: {
                    show: true, // 柱子上显示值
                    position: 'inside', // 值在柱子内部显示
                    textStyle: {
                      color: '#fff' // 值得颜色
                    }
                  }
                }
              }
            }, {
              name: '', // 名称为空，则不显示图例
              type: 'bar',
              stack: '任务数量',
              label: {
                normal: {
                  offset: ['50', '80'],
                  show: true,
                  position: 'insideBottom', // 显示总数
                  formatter: '{c}',
                  textStyle: { color: '#fff' }
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgba(193,35,43,0)' // 不显示总数的柱状图
                }
              },
              data: this_.totalData // 总数的数据，自己算
            }
          ]
        }
        myChart.setOption(option);
        myChart2.setOption(option2);
        // 建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener('resize',function() {myChart.resize()});
      }), 200)
    },
    components: {
    },
    watch: {
    }
  }
</script>
<style lang="less">
  #statistics {
    width: 50%;
    padding-top: 20px;
    padding-left: 20px;
    #chart_example{
      width: 70%;
      height: 270px;
      margin-bottom: 20px;
    }
    #chart_example2{
      width: 70%;
      height: 270px;
    }
  }
</style>

使用参考：https://blog.csdn.net/guozhangqiang/article/details/82379306
样式参考：https://blog.csdn.net/Cynthia_Yue27/article/details/81434493

注：

不需要在main.js引用，以上代码，安装完毕后可以直接使用，数据仅供参考

报错：

[Vue warn]: Error in created hook: "TypeError: Cannot read property 'getAttribute' of null"

报错

原因：

初始化时，元素未加载完，获取不到：
<div id="chart_example"></div>
<div id="chart_example2"></div>

解决办法：

setTimeout，延迟初始化时间，具体看代码

案例：屏幕快照 2019-05-29 下午5.26.08.png

vue用echarts图表（柱状图）
安装： npm install echarts -Shttps://www.cnblogs.com/Smiled/...
vue图表ehchart和富文本编辑器的使用
vue图表我们用echart $ npm install echarts --save在你要用的XX.vue中引用...
React-Echarts-通用配置
Echarts图标通用配置实际截图: React 中使用Echarts图表实际截图折线图柱状图:
Echarts tooltip超出div，展示不全问题解决
近期用vue做项目，使用echarts图表画图时，tooltip显示内容过多，会导致tooltip超出图表所在di...
Vue项目中使用Echarts创建图表
参考：Echarts官网、Vue项目中使用Echarts展示图表数据、Vue 爬坑之路（八）—— 使用 Echar...
echarts柱状图阴影区域点击事件
背景说明我们在做echarts图表的时候经常会出现需要点击图表打开弹窗或者打开新的页面，而如果图表是柱状图的话，...
vue + eCharts 实例
main.js需引入echarts，main.js 代码： echarts.vue代码：其它页面如需此柱状图可引入：
echarts tab切换默认宽度100px的问题
最近在vue中使用echarts时，碰到的一个echarts bug，tab切换时，echarts图表默认隐藏的时...
vue-cli+v-charts实现可视化图表
v-charts是饿了么团队开源的一款基于Vue和Echarts的图表工具，在使用 echarts 生成图表时，经...
Java笔记-Gson在解析包含单个字母的驼峰式变量遇到的一个小
踩坑过程 Coding时，我需要构建一个柱状图的json数据结构吐给前端。图表用的是百度的Echarts图形库，表...