• 【echarts入门】:vue项目中应用echarts


    一.安装echarts

    项目集成终端下载echarts

    npm install echarts --save

    二.全局引入

    创建/components/echarts/index.js
    1. // 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
    2. import * as echarts from "echarts/core";
    3. /** 引入任意图表,这里引入的是柱状图and折线图图表(图表后缀都为 Chart) */
    4. import { BarChart, LineChart } from "echarts/charts";
    5. // 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
    6. import {
    7. TitleComponent,
    8. TooltipComponent,
    9. GridComponent,
    10. DatasetComponent,
    11. TransformComponent,
    12. } from "echarts/components";
    13. // 标签自动布局,全局过渡动画等特性
    14. import { LabelLayout, UniversalTransition } from "echarts/features";
    15. // 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
    16. import { CanvasRenderer } from "echarts/renderers";
    17. // 注册必须的组件
    18. echarts.use([
    19. TitleComponent,
    20. TooltipComponent,
    21. GridComponent,
    22. DatasetComponent,
    23. TransformComponent,
    24. BarChart,
    25. LabelLayout,
    26. UniversalTransition,
    27. CanvasRenderer,
    28. LineChart,
    29. ]);
    30. // 导出
    31. export default echarts;
    在main.js注册
    1. import echarts from "./components/echarts/index.js";
    2. Vue.prototype.$echarts = echarts;
    在组件中使用
    1. <template>
    2. <div>
    3. <div id="maychar" style="width: 100%; height: 400px;">div>
    4. div>
    5. template>
    6. <script>
    7. export default {
    8. data () {
    9. return {};
    10. },
    11. mounted () {
    12. this.getCharts();
    13. },
    14. methods: {
    15. // 使用柱形图,关于其他配置可以去官网查看
    16. getCharts () {
    17. const chartBox = this.$echarts.init(document.getElementById("maychar"));
    18. const option = {
    19. xAxis: {
    20. data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    21. },
    22. yAxis: {},
    23. series: [
    24. {
    25. type: "bar",
    26. data: [23, 24, 18, 25, 27, 28, 25],
    27. },
    28. ],
    29. };
    30. chartBox.setOption(option);
    31. // 根据页面大小自动响应图表大小
    32. window.addEventListener("resize", function () {
    33. chartBox.resize();
    34. });
    35. },
    36. },
    37. };
    38. script>

  • 相关阅读:
    springMvc53-简单异常处理
    TCP协议详解
    后端接口性能优化分析-程序结构优化
    基于单片机停车场环境监测系统仿真设计
    C++中有哪些运算符以及它们的优先级?
    纯IP地址可以申请SSL证书实现HTTPS访问吗?
    静态路由与默认路由配置
    Node.js躬行记(23)——Worker threads
    代码规范工具
    那些年,我们一起追过的Python BUG
  • 原文地址:https://blog.csdn.net/weixin_70245286/article/details/133000586