ECharts的基础使用和通过修改配置项调整图表尺寸样式

本文介绍: 在软工实践课程的团队编程阶段，作为前端我需要实现一个数据可视化的统计页面，在一个页面里用到各种不同的图表来展示机房的一些相关数据，此时使用 echarts 数据可视化工具来实现是最为便捷和美观的。使用过程中并没有太大的难点，只是调整图表的大小尺寸无法通过统一缩放进行修改，配置项逐个查询和修改起来较为繁琐。我作为一个前端新手第一次使用echarts，会发现其实它是一个相当便捷的工具，使用上没有太大难度，对图表的修改无非就是查文档改配置项的问题。

在软工实践课程的团队编程阶段，作为前端我需要实现一个数据可视化的统计页面，在一个页面里用到各种不同的图表来展示机房的一些相关数据，此时使用echarts 数据可视化工具来实现是最为便捷和美观的。使用过程中并没有太大的难点，只是调整图表的大小尺寸无法通过统一缩放进行修改，配置项逐个查询和修改起来较为繁琐。

echarts的引入和使用并不难，只需要五个步骤就可以做到。

ECharts官方教程

当然，在使用之前要先安装 echarts，在控制台输入

（1）引入ECh ar ts 文件

import * as echarts from 'echarts';

<div id="chart" style="width: 350px;height: 320px;"></div>

var myChart = echarts.init(document.getElementById("chart"));

var Option={
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
}

mycharts.setOption(option)

myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

radius:'60%'

var mycolor = {
    type: 'linear',//线性渐变
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'rgba(174,187,228, 1)' // 0% 处的颜色
    }, {
        offset: .7, color: 'rgba(243,245,251, 0.7)' // 100% 处的颜色
    }],
    global: false
}