Echarts在线免费图表

 
            const data = [
   { label: "白石麻衣", popularity: 5298, ppearance_rate: 3985 },
   { label: "北川景子", popularity: 1688, ppearance_rate: 3658 },
   { label: "新垣结衣", popularity: 2368, ppearance_rate: 4965 },
   { label: "花泽香菜", popularity: 6428, ppearance_rate: 7536 },
   { label: "石原里美", popularity: 3896, ppearance_rate: 1689 },
   { label: "鬼头桃菜", popularity: 6895, ppearance_rate: 9856 },
   { label: "滨边美波", popularity: 5298, ppearance_rate: 2014 },
]
/** @description对象数组根据某个字段进行排序
  * arr 对象数组
  * prop 字段
  * 使用 objArrSort(list,'aaa')
  */
// const objArrSort = (arr, prop) => {
//    return [...arr].sort((a, b) => b[prop] - a[prop]);
// };
// const chartData = objArrSort(data, 'do')

const XData = data.map(item => item.label)
const YData1 = data.map(item => item.popularity)
const YData2 = data.map(item => item.ppearance_rate)

option = {
   backgroundColor: "#012337",
   //你的代码
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow'
      }
   },
   legend: {
      show: true,
      top: 20,
      right: 20,
      textStyle: {
         color: "#32C5FF"
      }
   },
   grid: {
      top: 75,
      left: 100,
      bottom: 50,
      right: 20
   },

   xAxis: {
      type: 'category',
      data: XData,
      axisTick: {
         alignWithLabel: true
      },
      // 字体样式
      axisLabel: {
         fontSize: 16,       // 字体大小
         // fontStyle: 'italic', // 字体风格
         // fontWeight: 'bold', // 字体粗细
         // rotate: 60,          // 旋转角度
         color: '#66FFFF',   // 字体颜色
      },
      // 网格线样式
      // splitLine: {
      //   show: true,
      //   lineStyle: {
      //     color: '#FF0000', // 线颜色
      //     width: 2,         // 线宽
      //     type: 'dashed'    // 线类型
      //   }
      // }
   },
   yAxis: {
      type: 'value',
      // 字体样式
      axisLabel: {
         //   fontSize: 16,       // 字体大小
         //   fontStyle: 'italic', // 字体风格
         //   fontWeight: 'bold', // 字体粗细
         //   rotate: 45,       // 旋转角度
         color: '#66FFFF',   // 字体颜色
      },
      // 网格线样式
      splitLine: {
         show: true,
         lineStyle: {
            color: 'rgba(102,255,255,.5)', // 线颜色
            width: 1,         // 线宽
            type: 'solid'    // 线类型
         }
      }
   },
   series: [
      {
         name: "人气",
         data: YData1,
         type: 'bar',
         barWidth: 24,
         label: {
            show: true,
            position: 'top',
            color: "#66FFFF",
            fontSize: 14
         },
         itemStyle: {
            normal: {
               show: true,
               barBorderRadius: [15, 15, 0, 0],
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "#fcaf17"
               },
               {
                  offset: 1,
                  color: "#ef4136"
               }
               ])
            },
         }
      },
      {
         name: "出场率",
         data: YData2,
         type: 'bar',
         barWidth: 24,
         label: {
            show: true,
            position: 'top',
            color: "#32C5FF",
            fontSize: 14
         },
         itemStyle: {
            normal: {
               barBorderRadius: [15, 15, 0, 0],
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 0,
                     color: "#ef5b9c",
                  },
                  {
                     offset: 1,
                     color: "#6950a1",
                  },
               ]),
            },
         },
      },
   ]
};
// 其他各种图表一个原理
let index = 0;
// 全部都适用 pie、bar、line
setInterval(function () {
   // 数据的长度
   if (index >= option.series[0].data.length) {
      index = 0;
   }
   myChart.dispatchAction({
      type: "showTip", // 提示框
      seriesIndex: 0,
      dataIndex: index // 对第几个进行提示
   });
   index += 1;
}, 2000);