用echarts绘制圆球

Question

如何用echarts绘制半径为5的球面。
关于echart做立体图形的介绍仿佛不是很多……

Answer 1

【相关推荐】

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7480084
• 你也可以参考下这篇文章：echarts点击柱状图事件，echarts柱状图悬浮展示相应的信息，echarts柱状图柱头展示信息
• 您还可以看一下 童金浩老师的跟风舞烟学大数据可视化－Echarts从入门到上手实战课程中的 【大数据可视化技术：Echarts】课程目标小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 关于封装echarts的那些事中的 一、对使用echarts需要提前知道的知识 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  option = {
      color: ['#3398DB'], // 图表色系
      tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
      },
      grid: { // canvas容器内边距
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true // 是否允许某些情况超出面板，默认false：允许
      },
      xAxis: [ // 横坐标轴
          {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                  alignWithLabel: true
              }
          }
      ],
      yAxis: [ //纵坐标轴
          {
              type: 'value',
              name: 'y轴名称'
          }
      ],
      series: [ //不同类型的数据结合
          {
              name: '直接访问',
              type: 'bar', //此数据对象对应的图表类型，可以为line, pie等
              barWidth: '60%',
              data: [10, 52, 200, 334, 390, 330, 220]
          }
      ]
  };
  

  1.

  观察echart不同类型的图表，如上图，我们会发现xAxis、yAxis、series都是数组，那么我们就可以使他们都变成两条数据即 两个相同或不同的横坐标轴、两个相同或不同的纵坐标轴、两个相同或不同的图表类型 进行任意搭配

  2.

  我们把他们的样式和数据拆分来看时(例如：饼状图、柱状图、折线图)，你会发现用同一个’option’ 我们仅需要改变series中type属性即可它在不同形状之前切换（当然啦，饼状图并没有横纵坐标轴~）

  
  3.图表初始化

  （1）let myChart = echarts.init(dom, theme, opts)

  (dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
      devicePixelRatio?: number,
      renderer?: string,
      width?: number|string,
      height?: number|string
  }) => ECharts
  dom：实例容器，一般是一个具有高宽的div元素。
  theme：应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 echarts.registerTheme 注册的主题名称。
  opts：附加参数。附加选项见

  图表初始化

  （2）myChart.setOption(option, merge, updates);

  option：图表数据 Object
  merge：是否和上次设置的option进行合并？ boolean， 默认false即合并
  updates：设置完option后是否不立即更新图表？ boolean，默认false即立即更新

  （3）echart4 配置属性：dataset数据集
  ECharts 4 开始支持了 数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便。

  关于 dataset 的详情，请参见教程。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^