<a-row class="h50" style="width:100%">
        <a-col span="24">
          <a-card class="card">
            <div class="card-title">站点近24小时电压趋势</div>
            <div id="voltage-trend"></div>
          </a-card>
        </a-col>
</a-row>
this.showVoltageTrend()
//电压趋势
    showVoltageTrend() {
      this.loadEcharts('voltage-trend')
      var myChart = echarts.init(document.getElementById('voltage-trend'))
      var option = {
        tooltip: {
          show: true,
          trigger: 'item',
        legend: {
          // data: ['电压'],
          left: '10%',
        grid: {
          top: '10%',
          left: '5%',
          right: '5%',
          bottom: '10%',
        xAxis: [
            type: 'category',
            data: this.voltageTrend.xData,
            axisTick: {
              show: false, // 是否显示坐标轴轴线
            axisLabel: {
              color: '#282828',
              interval: 2,
              rotate: 40,
            splitLine: {
              show: false,
            boundaryGap: true,
            axisLine: {
              //坐标轴轴线相关设置。
              show: true,
              inside: false,
              lineStyle: {
                color: '#000',
        yAxis: {
          type: 'value',
          name: '电压：V',
          scale: true,
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            show: true,
            textStyle: {
              color: '#737373',
          splitLine: {
            lineStyle: {
              color: 'rgba(131,101,101,0.2)',
              type: 'dashed',
        series: [
            // name: '电压',
            type: 'line',
            zlevel: 10,
            data: this.voltageTrend.voltageData,
            itemStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    offset: 0,
                    color: '#2185ec', // 0% 处的颜色
                    offset: 1,
                    color: '#fafdff', // 100% 处的颜色
                ]), //背景渐变色
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 2,
                  type: 'solid',
                  color: '#4aa3ff',
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      offset: 0,
                      color: '#2185ec', // 0% 处的颜色
                      offset: 1,
                      color: '#fafdff', // 100% 处的颜色
                  ]), //背景渐变色
              emphasis: {
                color: '#4aa3ff',
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 1,
                  type: 'dotted',
                  color: '#4aa3ff', //折线的颜色
            }, //线条样式
      setTimeout(() => {
        myChart.setOption(option)
        myChart.resize()
      }, 100)
      //echart 跟随屏幕自适应--防抖
      window.addEventListener('resize', function() {
        setTimeout(() => {
          myChart.resize()
        }, 2000)
#voltage-trend {
    height: 300px;
    width: 100%;
                                    在平时开发项目时，免不了需要对数据进行图表显示的需求，比如：趋势图、饼状图、柱形图等。自己身为一个PHPer，除了PHP本身的功能，不得不需要借助js来实现显示。在了解众多趋势图插件，国内外开源的项目，感觉还是来自百度团队研发的Echarts.js效果更好。本身是中文的项目，使用过程和显示效果更加适合使用。
什么是Echarts.js?
Echarts.js是来自百度团队研发的图表js插件，利用H...
                                    Echart多种示例应用下载，echarts图表demo下载，Echarts柱状图、Echarts折线图、Echarts饼图、Echarts雷达图等完整示例，Echart主标题和副标题的位置、样式等设置详解（以已解决）
                                    window.onload=function(){getEchartsData();changetab();$("#ct1").show();$("#ct2").hide();$("#ct3").hide();$("#ct4").hide();}functionchangetab() {//选中要显示的页面数据var tabs = document.getElementById("tab").ge...
itemStyle: {
    normal: {
        // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。
        // 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置
        color: new echarts.graphic.LinearG
                                    最近在工作中遇到一个需求，在小程序端统计数据，以图表的显示显示出来，刚接到这个需求是很萌懵的，应为大家都知道，小程序不太适合一些复杂的逻辑计算及请求数据显示的，但是需求是刚需必须周五搞定，本着需求是学习动力的态度，开是谷歌，百度，发现百度的echarts视图统计比较容易入手，官方有demo案列，网址：http://echarts.baidu.com/tutorial.html#%E5%9C%A8%...