Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度Echarts折线自定义拐点样式

var option = {
  tooltip: {
    show: true,
    trigger: 'axis',
    transitionDuration: 0,  // 让toolltip紧跟鼠标
    axisPointer: {
	  type: 'cross', 
	  label: {
	    backgroundColor: '#6a7985'
	  }
    }
  },
  legend: {
    show: false,
    textStyle: {
    color: '#fff',
    fontSize: 13
    }
  },
  grid: {
    left: '2%',
    right: '5%',
    bottom: '6%',
    containLabel: true
  },
  xAxis: [
    {
    type: 'category',
    boundaryGap: false,
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
    axisTick: {
      show:false,
      alignWithLabel: true
    },
    axisLine: {
      lineStyle: {
      color: '#0f5681'
      }
    },
    splitLine: {
      show: false,
      lineStyle: {
      color: '#0f5681',
      type: 'dotted'
      },
    },
    axisLabel: {
      show: true,
      textStyle: {
      color: '#fff',  //更改坐标轴文字颜色
      fontSize: 12    //更改坐标轴文字大小
      }
    }
    },
  ],
  yAxis: {
    type: 'value',
    name: this.yUnit,
    nameTextStyle: {
    color:'#fff',
    fontSize:12,
    align:'right'
    },
    axisLine: {
    lineStyle: {
      color: '#0f5681'
    }
    },
    axisTick: {
    show:false,
    alignWithLabel: true
    },
    splitLine: {
    lineStyle: {
      color: '#0f5681',
      type: 'dashed' // solid dashed dotted
    },
    },
    axisLabel: {
    show: true,
    align:'right',
    textStyle: {
      color: '#fff',  //更改坐标轴文字颜色
      fontSize: 12     //更改坐标轴文字大小
    }
    },
  },
  series: [
    {
    name: this.name,
    type: 'line',
    symbol: 'circle',
    symbolSize: '0.7',
    itemStyle: {
      // 线和拐点的颜色
      borderColor: '#01ecf2',
      color: '#0e0b12', //图例的颜色
    },
    emphasis: {
      itemStyle: { // 移入拐点样式配置
      color: '#0e0b12', //图例的颜色
      borderColor: '#b08010', //图形的描边颜色
      }
    },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: "#004b85" },
      { offset: 0.7, color: "#031233" },
      { offset: 1, color: "#031233" },
      ])
    },
    lineStyle: {
      color:'#01ecf2'
    },
    data: [18, 17, 175, 18, 11, 13, 95]
    }
  ]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

点击运行 》

点击展开全文

相关文章

  1. 百度Echarts图表之柱状图+折线图组合系列
  2. 百度Echarts折线图系列之动态效果
  3. 百度Echarts折线图系列之极简风
  4. 百度Echarts折线图系列之光滑效果
  5. 百度Echarts折线图系列之自定义拐点正方形样式