Echarts在线免费图表

 
            
let data = [120, 200, 150, 80, 70, 110, 130];
let bgarr = new Array();
bgarr.length = data.length;
bgarr.fill(1);
let color = 'red'
let labelColor = 'gold'
option = {
   backgroundColor:'#fff',
   grid:{
      bottom:'20%'
   },
   xAxis: [
      {
         type: 'category',
         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
         axisLabel: {
            color: color,
            fontSize: 14,
            fontWeight: 600
         },
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
      },
      {
         type: 'category',
         show: false
      }
   ],
   yAxis: [
      {
         type: 'value',
         axisLabel: {
            color: color,
            fontSize: 14,
            fontWeight: 600
         },
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         splitLine:{
            lineStyle:{
               color:'#9999994a'
            }
         }
      },
      {
         type: 'value',
         max: 1,
         show: false
      }
   ],
   color: [
      {
         type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
         colorStops: [
            {
               offset: 0,
               color: '#007BFF',
            },
            {
               offset: 1,
               color: '#4297FE',
            },
         ],
         global: false, // 缺省为 false
      }
   ],
   series: [
      {
         data: data,
         type: 'bar',
         z: 199,
         barWidth: '30%',
         itemStyle: {
            borderRadius: [4, 4, 0, 0]
         },
         label: {
            show: true,
            position: 'top',
            color: labelColor,
            fontSize: 12,
            fontWeight: 600
         }
      },
      {
         data: bgarr,
         xAxisIndex: 1,
         yAxisIndex: 1,
         z: 99,
         itemStyle: {
            color: '#cccccc2a'
         },
         barWidth: '50%',
         type: 'bar',
         id: 'bar_background'
      }
   ]
};
myChart.on('mouseout', (v) => {
   bgarr.length = 0;
   bgarr.length = data.length;
   bgarr.fill(1)
   myChart.setOption({
      series: {
         id: 'bar_background',
         data: bgarr
      }
   })
})
myChart.on('mouseover', (v) => {
   let dataIndex = v.dataIndex;
   bgarr[dataIndex] = {
      value: 1,
      itemStyle: {
         color: {
            type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
               {
                  offset: 0,
                  color: '#4297FE3a',
               },
               {
                  offset: 1,
                  color: '#cccccc2a',
               },
            ],
            global: false, // 缺省为 false
         }
      }
   }
   myChart.setOption({
      series: {
         id: 'bar_background',
         data: bgarr
      }
   })
})