zoukankan      html  css  js  c++  java
  • echarts使用小总结

    1、扩大图表y轴间的距离,只需要将echarts组件的高度加大就行啦。如:

    <div class="echartDatas">
       <nvechart :chartData="echartData" style="height:500px;"></nvechart>
    </div>

    2、echarts—设置折线图中折线线条颜色和折线点颜色及形状和折线阴影效果。

     https://blog.csdn.net/duyan_s/article/details/78833845

    https://www.cnblogs.com/wsir/p/6236677.html

    {
      name: "今日",
      type: "line",
      stack: "总量",
      data: [15, 470, 520, 160, 460, 398, 786],
      symbol:'circle',//拐点样式
      symbolSize:8,   //拐点圆的大小
      itemStyle: {
          normal: {
          color: "#02a0ff",//拐点颜色
          borderColor:'#fff',  //拐点边框颜色
          lineStyle: {
             color: "#02a0ff",
           shadowColor : '#96d3f7', //折线阴影颜色
               shadowBlur: 10,//折线阴影值
    
          }
        }
        }
      },

     3、横坐轴样式修改

    yAxis: [
              {
                type: "value",
                splitLine: {//横向坐标轴的线类型:实/虚
                  lineStyle: {
                    type: "dashed",
                    color: "#2f5883"
                  }
                }
              }
      ],

     4、基准线(坐标轴指示器)样式设置

     tooltip: {
              trigger: "axis",
    
              axisPointer: {
                z: 0, //让坐标轴指示器位于拐点下方显示
                //设置
                lineStyle: {
                  color: "#ff04eb", //这是鼠标经过时Y轴线样式设置(又称基准线和坐标轴指示器)
                  shadowColor: "#fff",
                  shadowBlur: 5,
                  color: new echarts.graphic.LinearGradient(//基准线设置渐变色
                      0, 1, 0, 0,  
                      [
                          {offset: 1, color: 'rgba(255,5,244,0)'},
                          {offset: 0.8, color: '#ff05f4'},
                          {offset: 0.2, color: '#ff05f4'},
                          {offset: 0, color: 'rgba(255,5,244,0)'}
                      ]               
                  )
    
                },
              }
            },

    5、显示下载图表按钮

    toolbox: {
              //是否显示下载按钮
              feature: {
                saveAsImage: {
                  iconStyle: {
                    borderColor: "#fff"
                  },
                  emphasis: {//鼠标经过时,按钮及文字显示颜色
                    iconStyle: {
                      borderColor: "#fff"
                    }
                  }
                }
              },
              color: "#fff"
    },
  • 相关阅读:
    最近重感冒完全不知道知己在记什么

    倾尽一生
    学习笔记,函数
    唯美句
    02 mysql 基础二 (进阶)
    01 mysql 基础一 (进阶)
    16 正则表达式
    15 迭代器、生成器、模块和包
    14 异常
  • 原文地址:https://www.cnblogs.com/fkcqwq/p/13374137.html
Copyright © 2011-2022 走看看