Echarts操作：实现Echarts的引用与创建应用实例

最新推荐文章于 2023-05-05 21:18:34 发布

cccccz958

最新推荐文章于 2023-05-05 21:18:34 发布

阅读量957

点赞数

文章标签： html vue.js javascript

本文链接：https://blog.csdn.net/weixin_44221475/article/details/104482161

版权

ECharts：一个纯 Javascript 的图表库，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
官网：https://www.echartsjs.com/zh/index.html

Step1：CDN引用echarts：

有好几种方法安装引用，个人比较喜欢CDN：

完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。
常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/echarts.common.js。
精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件，所包含内容参见：echarts/echarts.simple.js。

从https://www.jsdelivr.com/package/npm/echarts选择自己需要的版本，我选择的是完全版（echarts/dist/echarts.js），获取：

复制url

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.6.0/dist/echarts.min.js"></script>

</head>
</html>

Step2：创建echatrs容器：

<div id="main" style="height:40em;"></div>

Step3：绘制图表

let myChart = echarts.init(document.getElementById('main'));
let option = ();
myChart.setOption(option);

其中的option可以从官网实例中下载，创建对应形状的图标，如折线图、柱状图…
https://www.echartsjs.com/examples/zh/index.html

在这里插入图片描述

将option代码复制到option中就ok啦！

其中的一些属性可在https://www.echartsjs.com/zh/option.html#title中查看，如：标题的蚊子类型、文字内容…

在这里插入图片描述

最后附上一个实例 option为：

let white = '#a2abb9';
let bg = '#faffff';
let bottom = '#9dddfc';

let date = this.getDays(recentSevenDays);
let numOfPeople = res.data.numOfPeople; //res为请求返回的数据
let numOfTimes = res.data.numOfTimes;

let option = {
  title: {
    text: '日活跃分析表',
    textStyle: {
      align: 'center',
      color: white,
      fontSize: 20
    },
    top: '3%',
    left: '5%'
  },
  backgroundColor: bg,
  grid: {
    top: '25%',
    bottom: '10%'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      label: {
        show: true
      }
    }
  },
  legend: {
    data: ['日活跃量', '日活跃人数'],
    top: '15%',
    textStyle: {
      color: white
    }
  },

  //横轴
  xAxis: {
    data: date,
    axisLine: {
      show: true //隐藏X轴轴线
    },
    axisTick: {
      show: true //隐藏X轴刻度
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: white //X轴文字颜色
      }
    },
    axisLine: {
      lineStyle: {
        color: bottom
      }
    }
  },
  yAxis: [
    {
      type: 'value',
      name: '日活跃量（次）',
      nameTextStyle: {
        color: white
      },
      splitLine: {
        show: true
      },
      splitLine: {
        show: true
      },
      axisTick: {
        show: true
      },
      axisLine: {
        show: true
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: white
        }
      },
      axisLine: {
        lineStyle: {
          color: white
        }
      }
    },
    {
      type: 'value',
      name: '日活跃人数（个）',
      nameTextStyle: {
        color: white
      },
      position: 'right',
      splitLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        formatter: '{value} ', //右侧Y轴文字显示
        textStyle: {
          color: white
        }
      }
    },
    {
      type: 'value',
      gridIndex: 0,
      min: 50,
      max: 100,
      splitNumber: 8,
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
        }
      }
    }
  ],
  series: [
    {
      name: '日活跃人数',
      type: 'line',
      yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
      smooth: true, //平滑曲线显示
      showAllSymbol: true, //显示所有图形。
      symbol: 'circle', //标记的图形为实心圆
      symbolSize: 10, //标记的大小
      itemStyle: {
        //折线拐点标志的样式
        color: '#36b5f2'
      },
      lineStyle: {
        color: '#9dddfc'
      },
      areaStyle: {
        color: 'rgba(5,140,255, 0.2)'
      },
      data: numOfPeople
    },
    {
      name: '日活跃量',
      type: 'bar',
      barWidth: 15,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#4ece58'
            },
            {
              offset: 1,
              color: '#69c67b'
            }
          ])
        }
      },
      data: numOfTimes
    }
  ]
};

效果：
效果图

cccccz958

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts操作：实现Echarts的引用与创建应用实例

ECharts：一个纯 Javascript 的图表库，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。官网：https://www.echartsjs.com/zh/index.htmlStep1：CDN引用echarts：有好几种方法安装引用，个人比较喜欢CDN：完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：ech...
复制链接

扫一扫