React 学习笔记（十四）—— 图表使用

1. 安装插件：npm run install --s echarts echarts-for-react
2. 导入插件

   import ReactEchartsCore from "echarts-for-react/lib/core";
   import echarts from "echarts/lib/echarts";
   // 导入柱形图
   import "echarts/lib/chart/bar";
   // 导入提示
   import "echarts/lib/component/tooltip";
   // 导入标题
   import "echarts/lib/component/title";
   

3. 渲染函数和组件使用

   // options 参考echarts图表配置项
   const getBarOption = () => {
         return {
           title: {
             text: "热门知识点统计图",
             //   subtext: "统计前7名热门知识点",
             // ...PublicTitle, //这是我自己定义的title在另外一个文件
           },
   
           grid: {
             y: 70,
             x: 78,
           },
           xAxis: {
             type: "category",
             data: [
               "星期一",
               "星期二",
               "星期三",
   
               "星期四",
   
               "星期五",
   
               "星期六",
   
               "星期七",
             ],
             axisTick: {
               show: false,
             },
             //   show: false,
           },
           yAxis: {
             type: "value",
             splitLine: {
               show: false,
             },
             axisTick: {
               // show: false,
               inside: true,
             },
             //这是我定义的y轴数据
             // ...SetyAxis, 这是我自己定义的纵轴，在另外一个文件
           },
           series: [
             {
               type: "bar",
               barWidth: 40,
               data: sourceData, //这是我定义的渲染数据
               itemStyle: {
                 normal: {
                   color: "#5B8FF9",
                 },
               },
               label: {
                 color: "#f6f6f6",
                 show: true,
                 //   position: "insideLeft",
               },
             },
           ],
           tooltip: {},
         };
       };
   // 渲染
   <ReactEchartsCore
        style={{ background: "#fff", height: "376px", width: "50%" }}
        echarts={echarts}
        option={getBarOption()}
    />