【ECharts学习】

—丫丫

已于 2024-03-14 08:45:21 修改

阅读量818

点赞数 19

分类专栏：前端文章标签： vue webstorm

于 2024-03-13 18:57:05 首次发布

本文链接：https://blog.csdn.net/m0_46123285/article/details/136670371

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

webstorm的学习

一、简单了解webstorm？
二、webstorm实现可视化（html)
三、webstorm创建vue项目
- 1.安装vue-cli和webpack
- 2.使用webstorm创建vue项目
四、ECharts嵌入到vue项目
- 1.安装echarts
- 2.绘制图表

一、简单了解webstorm？

WebStorm是jetbrains公司旗下一款JavaScript开发工具。被广大中国JS开发者誉为“Web前端开发神器”“最强大的HTML5编辑器”“最智能的JavaScript IDE”等。

二、webstorm实现可视化（html)

1.ECharts官网下载方法

链接: link

这里用的控制台输入npm install --save
安装成功后，node_modules会多出来文件

在这里插入图片描述

2.折线图实例

参考官网：链接: link

在webstorm新建一个html文件（可建立文件，输入html:5，Tab后自动生成），将上面代码复制进sctript,如下
在这里插入图片描述
这时运行后按F12,会有报错

需要引入cdn引入ECharts

    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

引入后仍然有错，把 import * as echarts from ‘echarts’;注释掉
还是有错或者没有图像不报错，需要设置个容器存放，完整代码如下

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入ECharts脚本-->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
  //import * as echarts from 'echarts';

  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  };

  option && myChart.setOption(option);
</script>

</body>
</html>

在这里插入图片描述

3.柱状图实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 100%; height: 600px"></div>
<script type="text/javascript">
    //import * as echarts from 'echarts';
    //基于准备好的dom,初始化echarts实例，使用echarts.init方法初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    //指定图表的配置项和数据
    var option = {
        title:{
            text:'一周内的温度显示',
            subtext:'副标题',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        xAxis: [
            {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: 'Precipitation',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} ml'
                }
            },
            {
                type: 'value',
                name: 'Temperature',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value} °C'
                }
            }
        ],
        series: [
            {
                name: 'Evaporation',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' ml';
                    }
                },
                data: [
                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                ]
            },
            {
                name: 'Precipitation',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' ml';
                    }
                },
                data: [
                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                ]
            },
            {
                name: 'Temperature',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' °C';
                    }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
        ]
    };


    // 使用刚指定的配置项和数据显示图表,使用setOption方法生成图
    option && myChart.setOption(option);

</script>

</body>
</html>

在这里插入图片描述

4.饼图实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width: 100%;height: 600px" ></div>
  <script type="text/javascript">
    //import * as echarts from 'echarts';

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    const data = genData(50);
    option = {
      title: {
        text: '同名数量统计',
        subtext: '纯属虚构',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        data: data.legendData
      },
      series: [
        {
          name: '姓名',
          type: 'pie',
          radius: '55%',
          center: ['40%', '50%'],
          data: data.seriesData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    function genData(count) {
      // prettier-ignore
      const nameList = [
        '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
      ];
      const legendData = [];
      const seriesData = [];
      for (var i = 0; i < count; i++) {
        var name =
                Math.random() > 0.65
                        ? makeWord(4, 1) + '·' + makeWord(3, 0)
                        : makeWord(2, 1);
        legendData.push(name);
        seriesData.push({
          name: name,
          value: Math.round(Math.random() * 100000)
        });
      }
      return {
        legendData: legendData,
        seriesData: seriesData
      };
      function makeWord(max, min) {
        const nameLen = Math.ceil(Math.random() * max + min);
        const name = [];
        for (var i = 0; i < nameLen; i++) {
          name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
        }
        return name.join('');
      }
    }

    option && myChart.setOption(option);

  </script>

</body>
</html>

在这里插入图片描述

三、webstorm创建vue项目

1.安装vue-cli和webpack

npm install -g vue-cli
npm insatll -g webpack

2.使用webstorm创建vue项目

File——》new——》Project——》Vue.js
在这里插入图片描述
创建完成后发现里面是空的

这时需要手动创建vue-cli
(1)进入到cmd，切换到项目路径，然后vue init webpack初始化项目

安装完成后，通过vue-cli搭建一个vue项目，会自动生成一系列文件

在控制面板里下载依赖，npm install，然后npm run dev运行，也可以图形化运行
在这里插入图片描述

在这里插入图片描述
参考文档：https://www.cnblogs.com/zllk/p/14184614.html

四、ECharts嵌入到vue项目

1.安装echarts

控制台输入npm install echarts --save

2.绘制图表

创建一个以.vue为后缀的文件，路径在src—components—HelloWorld.vue 注意路径，后面路由会用到，首先引入echarts,这里采用的是按需引入，参考官网https://echarts.apache.org/handbook/zh/basics/import

<template>
  <div id="main" style="width: 500px;height:400px;"></div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
export default {
  created() {

    // 注册必须的组件
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      DatasetComponent,
      TransformComponent,
      BarChart,
      LabelLayout,
      UniversalTransition,
      CanvasRenderer
    ]);
  },
  mounted() {
    var myChart = echarts.init(document.getElementById('main'));
    let option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>

<style >

</style>

index.js文件注意路由路径，指向所创建的vue

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

在这里插入图片描述

—丫丫

关注

19
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
【ECharts学习】

webstorm的学习一、简单了解webstorm？二、webstorm实现可视化（html)1.ECharts官网下载方法2.折线图实例3.柱状图实例4.饼图实例三、webstorm创建vue项目1.安装vue-cli和webpack2.使用webstorm创建vue项目四、ECharts嵌入到vue项目1.安装echarts2.绘制图表一、简单了解webstorm？WebStorm是jetbrains公司旗下一款JavaScript开发工具。被广大中国JS开发者誉为“Web前端开发神器”“最强大的
复制链接

扫一扫