• Echarts X轴 Y轴 线的类型、颜色、及标签字体颜色 设置


     1     // 人均效能
     2     var initRjxnChart = function () {
     3         var rjxnChart = echarts.init(document.getElementById("rjxn_echart"));
     4         var rjxnoption = {
     5             tooltip: {
     6                 trigger: 'axis',
     7             },
     8             grid: {
     9                 left: '8%',
    10                 bottom: '20%',
    11                 top: '10%',
    12                 right: '8%',
    13             },
    14             legend: {
    15                 show: true,
    16                 orient: 'horizontal',
    17                 data: ['人均每小时操作量'],
    18                 x: '8%',
    19                 y: '0%',
    20                 textStyle: {
    21                     color: '#8c8c92'
    22                 }
    23             },
    24             color: ["#cd9136"],
    25             xAxis: [{
    26                 type: 'category',
    27                 data: ['上海', '北京', '江苏', '山东', '湖北', '武汉', '广州'],
    28                 boundaryGap: true,
    29                 axisTick: { // X轴线 刻度线 
    30                     show: false,
    31                     length: 10,
    32                     lineStyle: {
    33                         color: 'red',
    34                         type: 'solid',
    35                          2
    36                     }
    37                 },
    38                 axisLabel: {   // X轴线 标签修改 
    39                     textStyle: {
    40                         color: '#8c8c92', //坐标值得具体的颜色
    41                     }
    42                 },
    43                 splitLine:{  
    44                     show: true, // X轴线 颜色类型的修改
    45                     lineStyle: {
    46                         type: 'dashed',
    47                         color: '#292c38'
    48                     }  
    49                 },
    50                 axisLine: { 
    51                     show: true, // X轴 网格线 颜色类型的修改
    52                     lineStyle: {
    53                         type: 'dashed',
    54                         color: '#292c38'
    55                     }  
    56                 },  
    57             }],
    58             yAxis: [{
    59                 type: 'value',
    60                 name: '',
    61                 min: 0,
    62                 max: 3000,
    63                 interval: 500,
    64                 axisLabel: {
    65                     formatter: '{value}',
    66                     textStyle: {
    67                         color: '#8c8c92', //坐标值得具体的颜色
    68                     }
    69                 },
    70                 axisLine: { 
    71                     show: true, // Y轴线
    72                     lineStyle: {
    73                         type: 'dashed',
    74                         color: '#292c38'
    75                     }  
    76                 },
    77                 splitLine:{  
    78                     show: true,
    79                     lineStyle: {
    80                         type: 'dashed',
    81                         color: '#292c38'
    82                     }  
    83                 }  
    84             }],
    85             series: [{
    86                     name: '人均每小时操作量',
    87                     type: 'line',
    88                     data: [100, 200, 100, 500, 100, 100, 1000]
    89                 }
    90             ]
    91         };
    92         if (rjxnoption && typeof rjxnoption === "object") {
    93             rjxnChart.setOption(rjxnoption, true);
    94         }
    95     };
  • 相关阅读:
    ES6学习,持续更新!!!
    如何实现图片自适应
    jquery判断元素是否存在
    JS基础_对象字面量
    JS基础_基本数据类型和引用数据类型
    JS基础_属性名和属性值
    JS基础_对象的简介、对象的基本操作
    JS基础_质数练习的改进,提高程序执行效率
    JS基础_break和continue
    JS基础_打印出1-100之间所有的质数
  • 原文地址:https://www.cnblogs.com/zsongs/p/7340518.html
Copyright © 2020-2023  润新知