echart 详细配置（vue脚手架）

最新推荐文章于 2024-07-05 10:34:38 发布
置顶 最新推荐文章于 2024-07-05 10:34:38 发布
阅读量171 收藏
点赞数
分类专栏： vue echart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51565477/article/details/115911810
版权
vue 同时被 2 个专栏收录
22 篇文章 0 订阅
订阅专栏
echart
2 篇文章 0 订阅
订阅专栏

echart 详细配置（vue脚手架）

通用配置

<template>
  <div>
    <div ref="main" style="width: 100%;height:400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'AskFor',
  mounted () {
    var myChart = echarts.init(this.$refs.main)
    let sizeFun = function () {
        myChart.resize()
    }
    window.addEventListener('resize', sizeFun )
    //通用配置为任何一个图标类型都可以使用的配置
    
    // 标题: title   提示: tooltip   工具按钮: toolbox   图列: legend

    //工具按钮: toolbox 内置有导入图片,数据视图,动态类型切换,数据区域缩放,重置五个工具

    //图列: legend 筛选系列, 配合series配合,legend中的data的值需要和series数组中的某组数据的name保持一致
    
    var option = {
        //标题
        title: { 
           text: '这是一个标题',
           textStyle: { //样式
             color: '#ff0600', 
             fontWeight: 'bolder',
             fontSize: 16
           },
           left: '10%', //标题位置
           subtext: '这是副文本标题'
        },
        //提示
        tooltip: { 
          trigger: 'item', //触发的类型 item移入触发 
          triggerOn: 'mousemove', //触发时机  mousemove移入触发 click点击触发   
          formatter: `{a}-{b}:{c}`  //formatter决定了提示的内容
          // formatter: `{b}的数据是{c}`  //formatter决定了提示的内容
          // formatter: function(arg) {
          //   return arg.name +'的数据是'+arg.value //尽量使用click触发
          // }
        },
        //图列
        legend: {
          data: ['语文','数学']
        },
        //工具按钮
        toolbox: {
          feature: {
             saveAsImage: {}, //导出图片
             dataView: {}, //数据视图
             restore: {}, //重置还原
             dataZoom: {}, //区域缩放
             magicType: { //在哪些图标类型之间切换,动态图标类型的切换
               type: ['bar', 'line']
             } 
          }
        },
        //  x轴数据
        xAxis: { 
            type: 'category', // 类目轴
            data: ['一月', '二月', '三月', '四月', '五月', '六月'] //类目轴数据
        },
        // y轴
        yAxis: { 
            type: 'value' //数值轴
        },
        // series用于存放多个对象
        series: [{ 
            name: '语文',
            data: [120, 200, 150, 140, 100, 90], // y轴的数据
            barWidth: '30%', //柱状图宽度
            type: 'bar', //图标类型，bar为柱状图,line为折线图,pie饼图
            markPoint: {  //设置最大值和最小值
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: { //设置平均值
              data:[
                {type: 'average', name: '平均值'}
              ]
            },
            label: { //显示数值
              show: true,
              position: 'top', //位置top / left / right / bottom / inside
              // rotate: 30 //倾斜
            },
        },{ 
            name: '数学',
            data: [70, 20, 120, 118, 80, 100], // y轴的数据
            barWidth: '30%', //柱状图宽度
            type: 'bar', //图标类型，bar为柱状图,line为折线图,pie饼图
        }]
    }
    myChart.setOption(option)
  },
  methods: {

  }
}
</script>

<style scoped lang='less'>
</style>

折线图

<template>
  <div>
    <div ref="main" style="width: 100%;height:400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'AskFor',
  mounted () {
    var myChart = echarts.init(this.$refs.main)
    let sizeFun = function () {
        myChart.resize()
    }
    window.addEventListener('resize', sizeFun )    

    var option = {
        //提示
        tooltip: { 
          trigger: 'item', //触发的类型 item移入触发 
          triggerOn: 'click', //触发时机  mousemove移入触发 click点击触发   
          formatter: `{a}-{b}:{c}`  //formatter决定了提示的内容
        },
        //图列
        legend: {
          data: ['语文','数学']
        },
        //工具按钮
        toolbox: {
          feature: {
             saveAsImage: {}, //导出图片
             dataView: {}, //数据视图
             restore: {}, //重置还原
             dataZoom: {}, //区域缩放
             magicType: { //在哪些图标类型之间切换,动态图标类型的切换
               type: ['bar', 'line']
             } 
          }
        },
        //  x轴数据
        xAxis: { 
            type: 'category', // 类目轴
            data: ['一月', '二月', '三月', '四月', '五月', '六月'], //类目轴数据
            boundaryGap: false, //数据紧挨边缘
        },
        // y轴
        yAxis: { 
            type: 'value', //数值轴
            scale: '150' //当Y轴数据相差不大的时候,折现就是一条趋于平直的线,此时只要使Y轴数据的起始点不为0,scale可以设置
        },
        // series用于存放多个对象
        series: [{ 
            name: '语文',
            // data: [120, 200, 150, 140, 100, 90], // y轴的数据
            data: [120, 119, 116, 123, 124, 125], // y轴的数据:当Y轴数据相差不大的时候,折现就是一条趋于平直的线,此时只要使Y轴数据的起始点不为0,scale可以设置
            barWidth: '30%', //柱状图宽度
            type: 'line', //图标类型，bar为柱状图,line为折线图,pie饼图
            label: { //显示数值
              show: true,
              position: 'top', //位置top / left / right / bottom / inside
              // rotate: 30 //倾斜
            },
            markArea: { //固定区域标注阴影 [[这里是第一段标注阴影的开始和结束形式如{开始},{结束}],[这里是第二段标注阴影的开始和结束]]
              data: [[{xAxis: '一月'},{xAxis: '二月'}],[{xAxis: '四月'},{xAxis: '六月'}]]
            },
            smooth: 1, //线条的平滑效果 0-1
            lineStyle: { //线条样式
              color: 'green',   
              type: 'solid',  //  实现'solid'      虚线'dashed'     点线'dotted'
            }, 
            areaStyle: { //填充样式
              color: '#feff74'
            }
        }]
    }
    myChart.setOption(option)
  },
  methods: {

  }
}
</script>

<style scoped lang='less'>
</style>

散点图

<template>
  <div>
    <div ref="main" style="width: 100%;height:400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'AskFor',
  mounted () {
    var myChart = echarts.init(this.$refs.main)
    let sizeFun = function () {
        myChart.resize()
    }
    window.addEventListener('resize', sizeFun )    
    var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, { "gender": "female", "height": 167.5, "weight": 59 }, { "gender": "female", "height": 173, "weight": 59.8 },
     { "gender": "female", "height": 179.9, "weight": 67.3 }, { "gender": "female", "height": 170.5, "weight": 67.8 }, { "gender": "female", "height": 160, "weight": 47 }, 
     { "gender": "female", "height": 154.4, "weight": 46.2 }, { "gender": "female", "height": 162, "weight": 55 }, { "gender": "female", "height": 176.5, "weight": 83 }, 
     { "gender": "female", "height": 127.8, "weight": 54.4 }, { "gender": "female", "height": 152, "weight": 45.8 }, { "gender": "female", "height": 162.1, "weight": 53.6 }, 
     { "gender": "female", "height": 156.2, "weight": 73.2 }, { "gender": "female", "height": 150, "weight": 42.2 }, { "gender": "female", "height": 157.2, "weight": 49 }, 
     { "gender": "female", "height": 159, "weight": 73.2 }, { "gender": "male", "height": 180.3, "weight": 83.2 }, { "gender": "male", "height": 180.3, "weight": 83.2 }]
    var newArray = []
    for(var i=0; i<data.length; i++) {
      var msgA = data[i].height
      var msgB = data[i].weight
      var msgH = [msgA,msgB]
      newArray.push(msgH)
    }
    // console.log('处理后数据',newArray)
    var option = {
        //提示
        tooltip: { 
          trigger: 'item', //触发的类型 item移入触发 
          triggerOn: 'click', //触发时机  mousemove移入触发 click点击触发   
          formatter: `{a}{b}:{c}`  //formatter决定了提示的内容
        },
        //  x轴数据
        xAxis: { 
            type: 'value', // 数值轴
            scale: true //非0开始,脱离0值比列
        },
        // y轴
        yAxis: { 
            type: 'value', //数值轴
            scale: true // 非0开始
        },
        // series用于存放多个对象
        series: [{ 
            name: '散点图',
            // type: 'scatter', //scatter是散点图 effectScatter是涟漪动画
            type: 'effectScatter', 
            rippleEffect: { // 涟漪动画效果控制大小
              scale: 5,
            },
            showEffectOn: 'render',  //涟漪动画效果控制触发类型 emphasis鼠标移动散点上触发  render一直存在涟漪效果
            data:newArray, //散点图的数据
            // symbolSize: 40 , //散点的大小
            symbolSize: function(arg) {
              // console.log(arg)
              var msgA = arg[0]
              var msgB = arg[1]
              var b = msgB / (msgA * msgA)
              if(b > 0.0028) {
                return 20
              }
              return 5
            },
            itemStyle: {
              // color: 'green' //散点颜色
              color:function(arg) { 
                // console.log('输出',arg.data)
                var msgA = arg.data[0]
                var msgB = arg.data[1]
                var b = msgB / (msgA * msgA)
                if(b > 0.0028) {
                  return 'red'
                }
                return 'green'
              }
            }
        }]
    }
    myChart.setOption(option)
  },
  methods: {

  }
}
</script>

<style scoped lang='less'>
</style>

直角坐标系

<template>
  <div>
    <div ref="main" style="width: 100%;height:400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'AskFor',
  mounted () {
    var myChart = echarts.init(this.$refs.main)
    let sizeFun = function () {
        myChart.resize()
    }
    window.addEventListener('resize', sizeFun )
    
    var option = {
        dataZoom: [ //区域缩放 dlide底部滑块区域缩放  inside滚轮区域缩放
            { // 第一个 dataZoom 组件
                xAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个
                // start: 0, //初始化的筛选条件  从0还是50结束百分比
                // end: 50
            },
            { // 第二个 dataZoom 组件
                yAxisIndex: 0      
            }
        ],
        grid: { // 边框可以控制边框大小以及表格位置和大小
          // show: true,
          // borderWidth: 10,
          // borderColor: 'red',
          // left: 30,
          // top: 100
        },
        //  x轴数据
        xAxis: { 
            type: 'category', // 类目轴
            data: ['一月', '二月', '三月', '四月', '五月', '六月'], //类目轴数据
            // position: 'top', //坐标轴的位置
        },
        // y轴
        yAxis: { 
            type: 'value' //数值轴
        },
        // series用于存放多个对象
        series: [{ 
            name: '语文',
            data: [120, 200, 150, 140, 100, 90], // y轴的数据
            barWidth: '30%', //柱状图宽度
            type: 'bar', //图标类型，bar为柱状图,line为折线图,pie饼图
            markPoint: {  //设置最大值和最小值
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: { //设置平均值
              data:[
                {type: 'average', name: '平均值'}
              ]
            },
            label: { //显示数值
              show: true,
              position: 'top', //位置top / left / right / bottom / inside
              // rotate: 30 //倾斜
            },
        },{ 
            name: '数学',
            data: [70, 20, 120, 118, 80, 100], // y轴的数据
            barWidth: '30%', //柱状图宽度
            type: 'bar', //图标类型，bar为柱状图,line为折线图,pie饼图
        }]
    }
    myChart.setOption(option)
  },
  methods: {

  }
}
</script>

<style scoped lang='less'>
</style>

饼图

<template>
  <div>
    <div ref="main" style="width: 100%;height:400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'AskFor',
  mounted () {
    var myChart = echarts.init(this.$refs.main)
    let sizeFun = function () {
        myChart.resize()
    }
    window.addEventListener('resize', sizeFun )
    
    var option = {
        // series用于存放多个对象
        series: [{ 
          type: 'pie',
          data: [{name: '一月',value: 7120},{name: '二月',value: 5784},{name: '三月',value: 8945},{name: '四月',value: 4666}],
          label: { //提示设置
            show: true, 
            formatter: function(arg) {
              // console.log(arg)
              return arg.name +'消费'+  arg.value + '\n'+ arg.percent + '%'
            }
          },
          // radius:'20%' //半径  直接像素  百分比是宽度或者高度中较小的一半
          // radius: ['50%','75%'] //第一个代表内圆半径，第二个是外圆半径
          roseType: 'radius', //南丁格尔图、玫瑰图
          selectedMode: 'single', //single选中的偏离出来  multiple选中的每一段都会偏离
          selectedOffset: 30, //设置偏移量
        }]
    }
    myChart.setOption(option)
  },
  methods: {

  }
}
</script>

<style scoped lang='less'>
</style>
weixin_51565477
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue脚手架中使用ECharts
qq_44271127的博客
11-11 764
1. npm安装ECharts 在终端命令行中输入如下命令: npm install echarts --save 2. 在main.js中全局引入ECharts // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 3.在eCharts.vue中 <div id="myChart" :style="{ width: '500px', height: '500px' }"></div&gt
Vue脚手架配置
老实敦厚的小骚
01-08 1164
Vue脚手架配置流程 首先确定自己的node版本为新版 在当前文件夹输入cmd打开CMD终端 使用指令：npm i -g @vue/cli 进行全局安装 vue cil 脚手架 使用指令：vue create 项目名 创建Vue项目 然后进入下面选项： 然后进入选择自定义配置选项，选择自己需要的配置选项 注意：选中是空格不是回车 回车是继续下一步 选择版本 推荐3.0 选择路由配置 选择格式化模式 选择什么时候进行代码检测（按个人喜好） 选择多文件和单文件（
echarts的markline警标线（一条/多条）的使用
蓝胖子的博客
10-18 5100
echarts的markline警标线（一条/多条）的使用
Echarts高和宽自适应问题
yuzheh521的博客
06-24 516
<div id="myEcharts" style="display: none"> <div id="main" ></div> </div> function creatEcharts() { let myChartId = document.getElementById("main"); //高度计算 this.chartssize(document.getElementById("myEch..
Vue 3 中集成 ECharts(附一些案例)
最新发布
jieyucx的博客
07-05 6418
在现代Web开发中，Vue 3以其卓越的性能和灵活的Composition API赢得了广泛的关注。而ECharts，作为开源的一个使用JavaScript实现的强大可视化库，以其丰富的图表类型和高度可定制性成为了数据可视化的首选工具之一。今天，我们将结合Vue 3的语法糖和ECharts，来详细探讨如何在Vue 3项目中集成ECharts，并不仅仅局限于折线图，而是展示一个通用的集成方法。
Echar柱状堆叠图X轴自定义显示功能
℡メ㏑╭ァ小凯
06-08 1302
上效果图，这个功能在echar中是不自带的 源代码 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@page import="cn.com.victorysoft.eaf.authority.exposure.AppUser"%> <%@page import="cn.com.victorysoft.bussiness.AuthorityUtil"%> <%
echarts3.0 markline 最大值 最小值 均值 方差 标准差 包络 正态分布
mingminglv1的博客
07-30 6792
if (pie == "最大值" || pie == "最小值" || pie == "均值" || pie == "标准差" || pie == "方差" || pie == "包络范围" || pie == "正态分布") {         var max = option1.series[0].data[0];         var min = option1
echarts怎么在vue-cli脚手架里使用
BKayun的博客
08-04 475
在methods里创建一个show方法存放阴影部分的代码，在template部分再给一个#main的div给好宽高样式，并把echarts改成this.$echarts，然后把this.show()写到mounted里，就出来啦！（配置好路由）
vue脚手架（纯净版）
07-10
Vue脚手架（Vue CLI）是官方提供的一个命令行工具，旨在简化Vue项目的搭建和配置过程，让开发者能够快速启动新项目。"vue脚手架（纯净版）"通常指的是剥离了某些非必要插件或预设，只保留基础功能的CLI版本，以满足...
vue脚手架搭建项目的兼容性配置详解
10-18
本文将详细讲解如何配置Vue脚手架项目以解决IE的兼容性问题。 首先，我们需要解决IE不支持Promise对象的问题。这可以通过安装`babel-polyfill`来实现。在命令行中执行以下命令来安装： ```bash npm install --save...
VUE脚手架的下载和配置步骤详解
01-19
VUE脚手架下载 1.第一步全局安装...以上所述是小编给大家介绍的VUE脚手架的下载和配置详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的
Vue脚手架的简单使用实例
10-18
在Vue脚手架中集成其他库，如jQuery，可以通过`npm install`安装，然后在Webpack配置中使用`ProvidePlugin`，使全局可以访问到jQuery。例如： ```javascript plugins: [ new webpack.ProvidePlugin({ $: 'jquery',...
vue脚手架中使用echarts饼图
weixin_44356616的博客
07-10 665
** 第一步 黑窗口安装echarts：npm install echarts --save ** ** 第二步 在组件内引入echarts用 <script> import echarts from 'echarts'; export default { data(){ return {} }, mounted:function(){ var chartBar = ec...
Vue脚手架之Echarts的使用（简单案例）
z1696637434的博客
01-20 1257
扇形图为例和折线图为例 1.为ECharts准备一个具备大小（宽高）的Dom <template> <div> <!-- 主体区域 --> <el-main> <el-row :gutter="10" style="padding: 5px 0"> <el-col :span="8"> <el-card> <!-- 为EC
vue脚手架中引入echarts及使用
打代码是一天，不打代码也是一天
09-21 1138
安装echarts npm install echarts -S 代码示例 <!-- Echarts组件 --> <template> <div class="container"> <div id="echart"></div> </div> </template> <script> import echarts from 'echarts' export d
MPAndroidChart饼图及折线图
dream_summer的博客
09-08 1343
Android图表工具 MPAndroidChart 源码：https://github.com/PhilJay/MPAndroidChart 下载：https://github.com/PhilJay/MPAndroidChart/releases 教程：Android图表控件MPAndroidChart的简单介绍（MPAndroidChart3.0） MPAndroidChart折线图/柱状图/饼形图的使用 Android图表（最新版）----柱状图和饼状图 ...
Echarts加警示线/markLine，双Y轴，附各标签含义
qiudechao1的博客
08-16 1万+
series:[{第一组数据},{第二组数据}]：series里面放生成柱状图或折线图的数组， 而markLine是数组的一个属性，要放在数组内，每组数组可以有自己独立的markLine， series:[{ name: '销量', type: 'bar', data: datas1, yAxisIndex:0, ...
echarts之markLine(可以设置特定阈值线(警戒线))
热门推荐
fjxtgdx的博客
08-09 1万+
这个markLine在之前的自定义不等分y轴文章中说到了，这里又用到了，就顺便说下。自己笔记，仅供参考，互相探讨，共同进步。
Echarts 如何设置markLine的width
dulucy
12-17 3458
option = { xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] }, yAxis: {}, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: "line", markLine: { data: [{ type: "average
vue脚手架配置路由
10-14
在使用 Vue 脚手架创建的项目中，可以通过以下步骤配置路由： 1. 安装 Vue Router：在命令行中运行 `npm install vue-router` 或 `yarn add vue-router`。 2. 在 `src` 目录下创建一个名为 `router` 的文件夹，在该文件夹下创建一个名为 `index.js` 的文件。 3. 在 `index.js` 文件中引入 Vue 和 Vue Router，并使用 `Vue.use()` 方法注册 Vue Router。 4. 创建一个路由实例，并定义路由规则。 5. 在 Vue 实例中引入路由实例，并在 `router` 选项中指定该实例。 以下是一个简单的示例： ```javascript // src/router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', // 懒加载 About 组件 component: () => import('../views/About.vue') } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router ``` ```javascript // main.js import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app') ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值