[GitHub] helloyoucan commented on issue #9673: 渲染多个图表，独享x轴

[GitBox <gi...@apache.org>]

helloyoucan commented on issue #9673: 渲染多个图表，独享x轴
URL: https://github.com/apache/incubator-echarts/issues/9673#issuecomment-451070334
 
 
   版本：3.x
   //option
   const xAxisData = [2,4,6,8,10]
   const xAxisData2 = [1,2,3,4,5,6,7,8,9,10]
   const datas = [4,8,6,2,4]
   const datas2 = [1,0,1,0,1,0,1,0,1,0]
   function setFontSize(size, width = 1920) {
     return size * (document.body.clientWidth / width)
   }
   option =((theme)=> {
     const color = {
       white: {
         text: '#333',
         line: '#666'
       },
       dark: {
         text: '#fff',
         line: '#999'
       }
     }[theme]
     return {
       title: {
         text: 'XXX',
         top: setFontSize(30),
         left: setFontSize(45),
         textStyle: {
           fontSize: setFontSize(40),
           fontWeight: 'bolder',
           color: color.text
         }
       },
       grid: {
         left: setFontSize(50),
         right: setFontSize(50),
         bottom: setFontSize(30),
         top: setFontSize(90),
         containLabel: true
       },
       legend: {
         top: setFontSize(100),
         textStyle: {
           color: color.text
         },
         data: ['价格走势（ 元/斤 ）', '销量（ 斤 ）']
       },
       xAxis: [
         {// 价格走势的X轴
           data: xAxisData2,
           position: 'top',
           // show: false,
           // type: 'value',
           // boundaryGap: false,
           axisTick: { show: true, alignWithLabel: true, lineStyle: { width: setFontSize(2), color: '#ffffff' }},
           axisLine: { lineStyle: { color: color.text, width: setFontSize(2) }},
           axisLabel: { fontSize: '.2rem', color: color.text }
         },
           {// 销量(斤)的X轴
           data: xAxisData,
           position: 'bottom',
           // type: 'value',
           // boundaryGap: false,
           // show: false,
           axisTick: { show: false, alignWithLabel: true, lineStyle: { width: setFontSize(2), color: '#ffffff' }},
           axisLine: { lineStyle: { color: color.text, width: setFontSize(2) }},
           axisLabel: { interval: 0, fontSize: '.2rem', color: color.text }
         }
       ],
       yAxis: [
         {
           name: '销量（ 斤 ）',
           type: 'value',
           position: 'right',
           show: true,
           nameTextStyle: { fontSize: setFontSize(18) },
           axisTick: { show: false },
           axisLine: { lineStyle: { color: color.line, width: setFontSize(2) }},
           splitLine: { show: true, lineStyle: { color: [color.line], opacity: 0.2, width: setFontSize(2), type: 'solid' }},
           axisLabel: { fontSize: setFontSize(16), color: color.text }
         },
         {
           name: '价格走势（ 元/斤 ）',
           type: 'value',
           position: 'left',
           nameTextStyle: { padding: [0, 0, 0, setFontSize(100)], fontSize: setFontSize(18) },
           axisTick: { show: false },
           axisLine: { lineStyle: { color: color.line, width: setFontSize(2) }},
           splitLine: { show: false, lineStyle: { color: [color.line], opacity: 0.2, width: setFontSize(1), type: 'dotted' }},
           axisLabel: { fontSize: setFontSize(16), color: color.text }
         }
       ],
       series: [
         {
           name: '销量（ 斤 ）',
           yAxisIndex: 1,
           type: 'bar',
           barWidth: '50%',
           barGap: '0%',
           itemStyle: { color: '#0096ff', borderWidth: 0, borderColor: '#0096ff' },
           data: datas
         },
         {
           name: '价格走势（ 元/斤 ）',
           xAxisIndex: 0,
           data: datas2,
           type: 'line',
           lineStyle: { color: '#ff9c00', width: setFontSize(2) },
           itemStyle: { opacity: 0 }
           // itemStyle: { color: '#ff9c00', borderWidth: setFontSize(10) }
         }
       ]
     }
   }
   )('white')
   ![image](https://user-images.githubusercontent.com/17630711/50626766-0d442d80-0f6b-11e9-9c76-58d0b23a41b9.png)
   
   你好，我希望两个图表有不同的x轴，但是实际上是根据第一个x轴去渲染数据的，在配置中也没找到对应的配置，请问这个是我的配置问题还是没有这个配置项？
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org