码迷,mamicode.com
首页 > 其他好文 > 详细

eCharts图表(polar极坐标图)

时间:2017-08-04 19:37:51      阅读:1350      评论:0      收藏:0      [点我收藏+]

标签:逆时针   etop   val   axis   width   img   chart   清空   margin   

 

 

技术分享

 

极坐标图

HTML:

<div id="eChart"></div>

css:

       #eChart{

               width:500px;

               height:500px;

}

js:

/*渲染echart表格 */
function echart(redData, blueData, yellowData, clockwise, echartId) {
var myChart = echarts.init(document.getElementById(echartId));

var option = {
  title: {
  text: ‘‘
},
polar: {
  center: [‘50%‘, ‘50%‘]
},
tooltip: {
  trigger: ‘axis‘,
  axisPointer: {
    type: ‘cross‘
  }
},
angleAxis: {//极坐标系的角度轴
  type: ‘value‘,
  startAngle: 90,
  splitNumber: 30, //坐标轴分割段数
  clockwise: clockwise, //是否逆时针
  axisLine: { //坐标轴轴线设置
    lineStyle: {
      color: ‘#ccc‘,
    }
  },
  axisTick: { //坐标轴刻度设置
    show: false
  },
  splitLine: { //分割线设置
    show: false,
  },
  axisLabel: { //刻度标签设置
    textStyle: {
      color: ‘#333‘
    }
  }
},
radiusAxis: {//极坐标系的径向轴。
  min: 0,
  axisLine: { //坐标轴轴线设置
    show: false,
    // lineStyle: {
      // color: "#ccc"
    // }
  },
  axisTick: { //坐标轴刻度设置
    show: false
  },
  axisLabel: { //刻度标签设置
    margin: 0, //刻度与坐标轴之间的距离
    textStyle: {
      color: ‘#333‘
    }
  }
},
series: [{
  coordinateSystem: ‘polar‘,
  name: ‘line‘,
  type: ‘line‘,
  showSymbol: false,
  smooth: true,
  data: redData, //红线数据参数
  lineStyle: {
    normal: {
      color: ‘#f00‘
    }
  }
}, {
  coordinateSystem: ‘polar‘,
  name: ‘line‘,
  type: ‘line‘,
  showSymbol: false,
  smooth: true,
  data: blueData, //蓝线数据参数
  lineStyle: {
    normal: {
      color: ‘#0000ff‘
    }
  }
}, {
  coordinateSystem: ‘polar‘,
  name: ‘line‘,
  type: ‘line‘,
  showSymbol: false,
  smooth: true,
  data: yellowData, //黄线数据参数
  lineStyle: {
    normal: {
      color: ‘goldenrod‘
    }
  }
}],
  animationDuration: 2000
};

myChart.clear(); //清空数据缓存
myChart.setOption(option);
}//结束

 

eCharts图表(polar极坐标图)

标签:逆时针   etop   val   axis   width   img   chart   清空   margin   

原文地址:http://www.cnblogs.com/ermaoblog/p/7286529.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!