EchartBar 柱形图

TIP

1.1.0+

  1. <!-- 导入需要的包 -->  
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>

柱形图 - 图1

  1.   <avue-echart-bar ref="echart" :option="config" :data="data" width="1000"></avue-echart-bar>
  2. <script>
  3. export default {
  4.   data() {
  5.       return {
  6.         data: {
  7.           "categories": [
  8.             "北京",
  9.             "上海",
  10.             "杭州",
  11.             "深圳",
  12.             "杭州",
  13.             "深圳",
  14.             "广州",
  15.             "连云港"
  16.           ],
  17.           "series": [
  18.             {
  19.               "name": "手机品牌",
  20.               "data": [
  21.                 1131776,
  22.                 1349011,
  23.                 905718,
  24.                 1349011,
  25.                 905718,
  26.                 656020,
  27.                 571234,
  28.                 467397
  29.               ]
  30.             }, {
  31.               "name": "其他手机品牌",
  32.               "data": [
  33.                 1131776,
  34.                 1349011,
  35.                 905718,
  36.                 1349011,
  37.                 905718,
  38.                 656020,
  39.                 571234,
  40.                 467397
  41.               ]
  42.             }
  43.           ]
  44.         },
  45.         config: {
  46.           refreshTime: 5000,
  47.           title: '2019年度潍坊城市销售额排名',
  48.           titlePostion: '',
  49.           titleFontSize: 24,
  50.           titleColor: 'rgb(115, 170, 229)',
  51.           titleLink: "http://avue.top",
  52.           info: '这是图表的简介',
  53.           gridX: 105,
  54.           gridY: 50,
  55.           gridX2: 80,
  56.           gridY2: 100,
  57.           nameColor: '#333',
  58.           lineColor: '#333',
  59.           xNameFontSize: 16,
  60.           yNameFontSize: 16,
  61.           labelShow: false,
  62.           labelShowFontSize: 14,
  63.           labelShowFontWeight: 300,
  64.           yAxisInverse: false,
  65.           xAxisInverse: false,
  66.           xAxisShow: true,
  67.           yAxisShow: true,
  68.           xAxisSplitLineShow: false,
  69.           yAxisSplitLineShow: false,
  70.           refresh: 3000,
  71.           barWidth: 30,
  72.           barRadius: 8,
  73.           barColor: [{
  74.             color1: '#83bff6',
  75.             color2: '#188df0',
  76.             postion: 90
  77.           }, {
  78.             color1: '#23B7E5',
  79.             color2: '#564AA3',
  80.             postion: 50
  81.           }],
  82.           barMinHeight: 2,
  83.         }
  84.       }
  85.     },
  86. }
  87. </script>