码迷,mamicode.com
首页 > 其他好文 > 详细

Echart--单个柱形图

时间:2018-03-02 12:24:26      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:isp   sla   tchar   int   this   width   cti   legend   text   

效果图:

技术分享图片

dom:

<div class="chartAll" ref="chartAll"></div>

js:

let chartAll = this.$refs.chartAll//获取DOM
this.getChartAll = echarts.init(chartAll) this.getChartAll.setOption(this.optionAll, true)

  

设置数据:

optionAll: {
          title: {
            text: ‘开票总计‘,
            left: ‘center‘
          },
          tooltip: {
            trigger: ‘axis‘,
            axisPointer: {
              type: ‘cross‘,
              crossStyle: {
                color: ‘#999‘
              }
            }
          },
          legend: {
            // bottom: 10,
            // data: [‘金额‘]
          },
          xAxis: [
            {
              type: ‘category‘,
              data: [‘应收赊账‘, ‘已开票金额‘, ‘实收金额‘],
              axisPointer: {
                type: ‘shadow‘
              }
            }
          ],
          yAxis: [
            {
              type: ‘value‘,
              name: ‘金额(单位:元)‘,
              // min: 0,
              // max: 500,
              // interval: 100,
              axisLabel: {
                formatter: function(value) {
                  let mun = value / 1000
                  return mun + ‘k‘
                }
              }
            }
          ],
          series: [
            {
              barMaxWidth: ‘50‘,
              itemStyle: {normal: {color: ‘#3580B8‘, label: {show: true, position: ‘top‘}}},
              name: ‘金额‘,
              type: ‘bar‘,
              data: []//显示的数据
            }
          ]
        }

  

Echart--单个柱形图

标签:isp   sla   tchar   int   this   width   cti   legend   text   

原文地址:https://www.cnblogs.com/LWJ-booke/p/8492125.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!