4.13

使用Echarts

首先安装 npm install echarts --save

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

还有另一种方式表示数据

data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']

},

yAxis: {},

series: [

    {
    
      name: "销量",
      type: "bar",
      /* data: [5, 20, 36, 10, 10, 20] */
      radius:'55%',
      data: [
        {
          value: 5,
          name: "衬衫",
          /* 这是单独设置给某一个设置颜色 */
          itemStyle:{
              color:'red'
          }
        },
        {
          value: 20,
          name: "羊毛衫",
        },
        {
          value: 36,
          name: "雪纺衫",
        },
        {
          value: 10,
          name: "裤子",
        },
        {
          value: 10,
          name: "高跟鞋",
        },
        {
          value: 20,
          name: "袜子",
        },
      ],
    },

]