首页 > 其他分享 >Vue+Echert集成实现数据可视化

Vue+Echert集成实现数据可视化

时间:2024-09-05 23:55:25浏览次数:12  
标签:Echert Vue 颜色 10 color 图例 可视化 type echarts

Apache EChartsecherts官方文档 

echerts依赖引入方式

方式一:

1.安装echarts依赖

//   二选一
npm install echarts --save

npm install echarts -S




//   二选一
npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install echarts -S

2.全局注入

在 main.js 中引入 echarts

vue2
import echarts from 'echarts'

Vue.prototype.$echarts = echarts





vue3
import echarts from 'echarts'
//二选一
app.config.globalProperties.$echarts = echarts
app.provide('$echarts',echarts)



3.创建Demo测试

vue2的代码如下:

<template>
	<div id="myChart" :style="{width: '450px', height: '300px'}"></div>
</template>
<script>
export default {
  name: 'Echarts',
  data () {
    return {
      msg: 'Vue + Echarts'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom,初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: 'ECharts 入门示例' },
            tooltip: {},
            legend: {
              data: ["销量"]
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}
</script>




vue3的代码使用如下:

第一种方式:
<template>
  <div id="myChart" :style="{ width: '450px', height: '300px' }"></div>
</template>
<script setup>

注:通过getCurrentInstance()获取组件实例,类似vue2的this

getCurrentInstance 方法可以在组合式 API(Composition API)中获取当前组件实例。这个方法返回一个包含了组件实例的对象,你可以用它来访问组件的 props、attrs、slots 和 emit 方法等。

proxy:访问响应式数据和方法
ctx:访问属性和方法
注:ctx代替this只适用于开发阶段,如果将项目打包放到生产服务器上运行,就会出错,ctx无法获取路由和全局挂载对象的。此问题的解决方案就是使用proxy替代ctx


import { getCurrentInstance, onMounted, ref } from 'vue';

const handle = () => {
  const constainer = ref(document.getElementById('myChart'));
  const { proxy } = getCurrentInstance();

  let myChart = proxy.$echarts.init(constainer.value)

  myChart.setOption({
    title: { text: 'ECharts 入门示例' },
    tooltip: {},
    legend: {
      data: ["销量"]
    },
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  });
}



第二种方式:通过采用provide, inject方式使用
import { createApp, provide } from "vue";
createApp(App).provide("$echarts",echarts);





const handle = () => {
  const constainer = ref(document.getElementById('myChart'))

  // let Echarts = inject('$echarts')

  const myEcharts = inject('$echarts').init(constainer.value)

    myEcharts.setOption({
    title: { text: 'ECharts 入门示例' },
    tooltip: {},
    legend: {
      data: ["销量"]
    },
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  });
}




4.效果图

方式二 

1.安装依赖

npm install vue-echarts -S

2.按需导入

// echarts 按需引入
let echarts2 = require("echarts/lib/echarts");

// 引入折线图等组件
require("echarts/lib/chart/line");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/radar");

// 引入提示框和title组件,图例
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");

3.Demo测试

<template>
    <div class="container">
        <div id="main1" class="box"></div>
        <div id="main2" class="box"></div>
        <div id="main3" class="box"></div>
    </div>
</template>
<script>
import echarts from "echarts";
// echarts 按需引入
let echarts2 = require("echarts/lib/echarts");
// 引入折线图等组件
require("echarts/lib/chart/line");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/radar");
// 引入提示框和title组件,图例
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
export default {
    name: 'Info1',
    components: {},
    mounted() {
        this.initChart();
    },
    data() {
        return {};
    },
    methods: {
        initChart() {
            let myChart1 = this.$echarts.init(document.getElementById('main1'));
            let myChart2 = echarts.init(document.getElementById('main2'));
            let myChart3 = echarts2.init(document.getElementById('main3'));
            // 绘制图表
            myChart1.setOption(this.setOption('全局全部引入'));
            myChart2.setOption(this.setOption('局部全部引入'));
            myChart3.setOption(this.setOption('局部按需引入'));
        },
        setOption(title) {
            let option = {
                title: { text: title },
                tooltip: {},
                legend: {
                	data: ["销量"]
                },
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: "销量",
                    type: "bar",
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
        return option;
        }
    }
};
</script>
<style scoped>
.container {
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
}
.box {
    width: 300px;
    height: 300px;
    border: 2px solid #000;
}
</style>

 

4.效果图

 

echerts配置项

各个配置项属性

option = {
  title: {},    //标题组件,包含主标题和副标题,如有副标题可以写成数组
  color: [],    //颜色
  backgroundColor: '',  //背景色
  darkMode: '',    //是否是暗黑模式
  dataZoom: [],    // 
  dataset: [{}],   //数据集合
  toolbox: {},     //工具栏组件
  tooltip: {},     //提示框组件
  grid: {},     //图表上下左右距离盒子的距离
  xAxis: {},    //x轴组件
  yAxis: {},    //y轴组件
  series: [{
    type: ''    //graph关系图,line折线图,bar柱形图,boxplot箱体图等
  }],
  graphic: [],
  baseOption: {},
  legend: {},    //控制图例组件
  calculable: '',
  options: [],
  brush: {},
  animation: true,     //是否开启动画,布尔值
  animationThreshold: 2000,    //是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画
  animationDuration: 1000,     //初始动画时长
  animationEasing: 'cubicOut',    //初始动画缓动效果
  animationDelay: 0,   //初始动画的延迟,毫秒,支持回调函数
  animationDurationUpdate: 300,   //数据更新动画的时长,毫秒,支持回调函数
  animationEasingUpdate: 'cubicInOut',  //数据更新动画的缓动效果
  animationDelayUpdate: 0,    //数据更新动画的延迟,毫秒,支持回调函数
  blendMode: '',   //图形的混合模式,默认为source-over,支持每个系列单独设置。
  hoverLayerThreshold: 3000,   //图形数量阈值
  useUTC: false,   //是否使用UTC时间
  options: '',
]};

 1、title配置项

title: {
				text: "标题",
				left: "center",		//grid 组件离容器左侧的距离
				top: 20,
				show: true,			//grid 组件离容器上侧的距离。
				link: "http://www.baidu.com",
				target: "self",
				textStyle: {		//主标题文字的颜色。
					color: '',    //字体颜色
                fontStyle: '',    //字体风格
                fontSize: 14,     //字体大小
                fontWeight: 400,  //字体粗细
                fontFamily: '',   //文字字体
                lineHeight: ''    //字体行高
                align:'center',   //文字水平对齐方式(left/right)
                verticalAlign:'middle',    //文字垂直对齐方式(top/bottom)
				},
				subtext: "副标提",
				sublink: "http://echarts.baidu.com/demo.html#pie-custom",
				subtarget: "self",
				subtextStyle: {		//副标题文字的颜色。
					color: "blue",
					fontStyle: "italic",
					fontWeight: 100,
					fontSize: 10
 
				},
				padding: [10, 10],   // 设置上下的内边距为 5,左右的内边距为 10
				itemGap: 0,			// 主副标题之间的间距。
				zlevel: 5,			//zlevel用于 Canvas 分层
				backgroundColor: 'rgb(128, 128, 128)',	//标题背景色,默认透明
				borderColor: "yellow",	//标题的边框颜色
				borderWidth: 1,			//标题的边框线宽。
				shadowBlur: 30,			//图形阴影的模糊大小
				shadowColor: "blue",	//阴影颜色
				shadowOffsetX: 10,		//阴影水平方向上的偏移距离。
				shadowOffsetY: 10		//阴影垂直方向上的偏移距离。		
			}





当有副标题的时候title有两种写法,可以写为数组或对象。 
   title: [
    {    // 标题
      text: '标题',
      left: 'center'
    },
    {   // 副标题
      text: '副标题',     // '/n'换行
      borderColor: '#999', 
      borderWidth: 1,   // 边框宽度(默认单位px)
      textStyle: {      // 标题样式
        fontSize: 14
      },
      left: '10%',      // 位置
      top: '90%'        // 位置
    }
  ],

2、颜色配置

1.全局color配置代码如下:

option = {
  /这里的color是全局配置,下面给的颜色会覆盖上述-调色盘颜色列表-中的颜色,数据会循环红色与绿色/
  color: ['red', 'green'],
  title: {}
}

 2、 线性渐变

  • LinearGradient
color: [  //仪表盘背景颜色渐变
  [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, 
    [{
      offset: 0.1,
      color: "#fd2100"
    }, {
      offset: 0.6,
      color: "#d09f00"
    }, {
      offset: 1,
      color: "#26fd00"
    }]);
  ]
]
  •  线性渐变linear
/前四个参数分别是x0,y0,x2,y2,范围从0-1,相当于在图形包围盒中的百分比,若globalCoord为true,则该四个值是绝对的像素位置/
color: {
  type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
    offset: 0, color: 'red'   // 0% 处的颜色
  }, {
    offset: 1, color: 'blue'  // 100% 处的颜色
  }],
  global: false               // 缺省为 false
}
  • 径向渐变radial

/前三个参数分别是圆心x,y和半径,取值同线性渐变/
color: {
  type: 'radial',
  x: 0.5,
  y: 0.5,
  r: 0.5,
  colorStops: [{
    offset: 0, color: 'red'   // 0%处的颜色
  }, {
    offset: 1, color: 'blue'  // 100% 处的颜色
  }],
  global: false               // 缺省为 false
}

 3、扇形渐变

color: [
  [0.1, 'red'],
  [0.3, new echarts.graphic.LinearGradient(0, 1, 0, 0,
    [{
      offset: 0,
      color: 'red'
    }, {
      offset: 0.8,
      color: 'rgb(235,205,6)'
    }]
  )],
  [0.7, 'rgb(235,205,6)'],
  [0.9, new echarts.graphic.LinearGradient(0, 1, 0, 0,
    [{
      offset: 0,
      color: 'rgb(13,211,97)'
    }, {
      offset: 0.6,
      color: 'rgb(235,205,6)'
    }]
  )],
  [1, 'rgb(13,211,97)']
],

 4、纹理填充

color: {
  //支持为HTMLImageElement, HTMLCanvasElement,不支持路径字符串
  image: document.getElementById('bg_img'), 
  repeat: 'repeat' // 是否平铺,可以是'repeat-x','repeat-y','no-repeat'
}

 

2、 legend图例组件配置项

itemStyle:图形样式

lineStyle:图例图形中线的样式

textStyle:图例图形中文字的样式

tooltip:图例的tooltip配置,配置项同tooltip。默认不显示。

data:图例数据数组,若data没有被指定,会自动从当前系列中获取。多数系列会取自series.name或者series.encode的 seriesName所指定的维度

legend: {
    type: 'plain',  //图例类型,plain/scroll
    show: true,     //是否显示x轴,布尔值
    zlevel: 2,      //控制图形的前后顺序
    z: 2,       //控制图形的前后顺序
    left: '',   //图例离容器左侧的距离,20/'20%'/'left'/'atuo'等
    top: '',
    right: '',
    bottom: '',
    width: 'auto',   //宽度,默认自适应
    height: 'auto',  //高度,默认自适应
    orient: 'horizontal',  //布局朝向,horizontal/vertical
    align: 'auto',   //图例标记和文本的对齐,默认自动,auto/left/right
    padding: 5,      //内边距,默认各方向内边距为5px
    itemGap: 10,     //图例间隔。横向时为水平间隔,纵向时为纵向间隔
    itemWidth: 25,   //图形宽度
    itemHeight: 14,  //图形高度
    itemStyle: {  
        color: '',   //颜色,参考下面的文章
        borderColor: '',    //描边颜色,支持格式同color,不支持回调函数
        borderWidth: auto,  //描边宽度,可以为数字默认单位为px
        borderType: solid,  //描边类型,值:solid默认/dashed/dotted/number/array
        borderDashOffset: 0,//虚线偏移量,搭配borderType指定dashed、array实现灵活的虚线效果
        borderCap: round   //线段末端的绘制,butt方形/round圆形/square也是方形效果与butt不同
    },
    lineStyle: {
        color: '',      //颜色,参考下面的文章
        width: auto,    //线宽
        type: solid,    //线的类型,solid默认/dashed/dotted/number/array
        dashOffset: 0,  //虚线的偏移量,type指定dashed、array实现灵活的虚线效果
        cap: round,     //指定线段末端的绘制方式,参考上面的'borderCap'
        join: auto,  //设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性,bevel默认/round/miter
        miterLimit: 10,  //设置斜接面限制比例,只有当join为miter才有效,属性值:10默认值/number
        //阴影模糊大小,该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
        shadowBlur: 10,
        shadowColor: '',   //阴影颜色,格式同color
        shadowOffsetX: 0,  //阴影水平方向上偏移距离
        shadowOffsetY: 0,  //阴影垂直方向上的偏移距离
        opacity: auto  //透明度,支持从 0 到 1 的数字,为 0 时不绘制该图形
    },
    symbolRotate: inherit,  //旋转角度,类型为number|inherit。若为inherit,表示取系列symbolRotate
    formatter: 'Legend {name}',  //用来格式化图例文本,支持字符串模板和回调函数两种形式,name为图例名称
    selectedMode: true,     //图例选择模式,true/false/single/multiple
    inactiveColor: '#ccc',  //图例关闭时的颜色
    inactiveBorderColor: '#ccc',  //图例关闭时的描边颜色
    inactiveBorderWidth: 'auto',  //关闭时的描边粗细,属性值:auto取2/不存在描边取0/inherit始终取系列描边粗细
    selected: {
        '系列1': true,     // 选中'系列1'
        '系列2': false     // 不选中'系列2'
    },
    textStyle: {
        color: #333,     //文字颜色
        fontStyle: '',   //字体风格
        fontWeight: '',  //字体粗细
        fontFamily: '',  //字体系列
        fontSize: 12,    //字体大小
        lineHeight: 16,  //行高
        backgroundColor: '',  //背景色,例如:'#123234', 'red', 'rgba(0,23,11,0.3)'
        borderColor: '',  //边框颜色
        borderWidth: 0,   //边框宽度
        borderType: 'solid',  //边框描边类型,属性值:solid/dashed/dotted/number/array
        borderDashOffset: 0,  //虚线偏移量,可搭配borderType指定dashed/array实现灵活的虚线效果
        borderRadius: 0,   //文字块圆角
        padding: 0,        //文字块内边距
        shadowColor: 'transparent',  //文字块背景阴影颜色
        shadowBlur: 0,     //文字块背景阴影长度
        shadowOffsetX: 0,  //文字块背景阴影 X 偏移
        shadowOffsetY: 0,  //文字块背景阴影 Y 偏移
        width: 0,          //文本显示宽度
        height: 0,         //文本显示高度
        textBorderColor: '',  //文字本身描边颜色
        textBorderWidth: '',  //文字本身描边宽度
        textBorderType: 'solid',  //文字本身描边类型,属性值:solid/dashed/dotted/number/array
        textBorderDashOffset: 0,//虚线偏移量,可搭配textBorderType指定dashed/array实现灵活的虚线效果
        textShadowColor: 'transparent',  //文字本身阴影颜色
        textShadowBlur: 0,     //文字本身阴影长度
        textShadowOffsetX: 0,  //文字本身阴影 X 偏移
        textShadowOffsetY: 0,  //文字本身阴影 Y 偏移
        overflow: 'none',  //文字超出宽度是否截断或者换行,配置width时有效,属性值:truncate/break/breakAll
        ellipsis: '',  //在overflow配置为'truncate'的时,该属性配置末尾显示文本
        rich: {},      //自定义富文本样式
    },
    tooltip: {         //配置项同tooltip。默认不显示
        show: true
    },
    //图例项icon,用来修改默认的图形样式
    icon: '',   //属性值:circle/rect/roundRect/triangle/diamond/pin/arrow/none/'image:'/'path:'
    data: [{
        name: '',
        //图例项的icon
        icon: 'circle',  
        itemStyle: {     //图例项的图形样式
            color: 'red',
            borderColor: ''
            borderWidth: auto,
            borderType: '',
            borderDashOffset: 0,
            borderCap: inherit,
            borderJoin: inherit,
            borderMiterLimit: inherit,
            shadowBlur: 0,
            shadowColor: '',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            opacity: inherit,
            decal: inherit
        },
        lineStyle: {},   //同上面的itemStyle
        symbolRotate: 'inherit',  //图形旋转角度
        textStyle: {}   //图例项的文本样式
    }],
    backgroundColor: 'transparent',  //图例背景色,默认透明
    borderColor: '#ccc',  //边框颜色
    borderWidth: 1,       //边框线宽
    borderRadius: 0,      //圆角半径,单位px,支持传入数组分别指定 4 个圆角半径
    //图形阴影的模糊大小,该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
    shadowBlur: 10,  
    shadowColor: '',     //阴影颜色。支持的格式同color
    shadowOffsetX: 0,  
    shadowOffsetY: 0,  
    scrollDataIndex: 0,    //type为'scroll'时有效,图例当前最左上显示项的dataIndex
    pageButtonItemGap: 5,  //type为'scroll'时有效,图例控制块中,按钮和页信息之间的间隔
    pageButtonGap: '',     //type为'scroll'时有效,图例控制块和图例项之间的间隔
    pageButtonPosition: 'end',  //type为'scroll'时有效,图例控制块的位置
    pageFormatter: '{current}/{total}',  //type为'scroll'时有效,图例控制块中,页信息的显示格式
    pageIcons: {      //type为'scroll'时有效,图例控制块的图标
        horizontal: '',
        vertical: ''
    },
    pageIconColor: '#2f4554',   //type为'scroll'时有效,翻页按钮的颜色
    pageIconInactiveColor: '#aaa',  //type为'scroll'时有效,翻页按钮不激活时(即翻页到头时)的颜色
    pageIconSize: 15,   //type为'scroll'时有效,翻页按钮的大小
    pageTextStyle: {},  //type为'scroll'时有效,图例页信息的文字样式,属性值参考textStyle写法
    animation: true,    //图例翻页是否使用动画
    animationDurationUpdate: 800,  //图例翻页时动画时长
    emphasis: {
        selectorLabel: {}  //内容参考textStyle
    },
    selector: false,     //图例组件中选择器按钮,默认不显示
    selectorLabel: {},   //选择器按钮的文本标签样式,内容参考textStyle
    selectorPosition: 'auto',  //选择器位置
    selectorItemGap: 7,    //选择器按钮之间间隔
    selectorButtonGap: 10  //选择器按钮与图例组件之间间隔
}

3、tooltip提示框组件配置项

  • axisPointer:坐标轴指示器配置项
  • label:坐标轴指示器的文本标签
  • lineStyle:axisPointer.type为line时有效
  • shadowStyle:axisPointer.type为shadow时有效
  • crossStyle:axisPointer.type为cross时有效。
  • textStyle:提示框浮层的文本样式
tooltip: {
    show: true,      //是否显示提示框组件
    trigger: 'item',  //触发类型,属性值:item数据项触发/axis坐标轴触发/none不触发
    axisPointer: {
        type: 'line',  //指示器类型,属性值:line直线/shadow阴影/none/cross十字准星
        axis: 'auto',  //指示器坐标轴,属性值:x/y/radius/angle
        snap: true,    //坐标轴指示器是否自动吸附到点上。默认自动判断,布尔值
        z: 0,  //坐标轴指示器z值,控制图形的前后顺序,属性值:number
        label: {
            show: false,        //是否显示文本标签
            precision: 'auto',  //文本标签中数值小数点精度。默认根据当前轴的值自动判断
            formatter: {},      //文本标签文字格式化器
            margin: 3,          //label距离轴的距离
            color: '#fff',      //颜色,文章链接如下  Echart图表之颜色color配置项大全
            fontStyle: '',  
            fontWeight: '',  
            fontFamily: '',  
            fontSize: 12,  
            lineHeigh: 20,  
            width: 20,  
            height: 100,  
            textBorderColor: '',  //文字本身描边颜色
            textBorderWidth: ,    //文字本身描边宽度
            textBorderType: 'solid',  //文字本身描边类型,属性值:solid/dashed/dotted/number/array
            textBorderDashOffset: 0,  //虚线偏移量,搭配textBorderType指定dashed/array实现虚线效果
            textShadowColor: 'transparent',  //文字本身阴影颜色
            textShadowBlur: 0,     //文字本身的阴影长度
            textShadowOffsetX: 0,  //文字本身的阴影 X 偏移
            textShadowOffsetY: 0,  //文字本身的阴影 Y 偏移
            overflow: 'none',  //文字超出宽度是否截断或换行,配置width时有效,truncate/break/breakAll
            ellipsis: '',     //在overflow配置为'truncate'的时候,可以通过该属性配置末尾显示的文本
            padding: 0,  
            backgroundColor: 'auto',  //背景颜色,默认是和axis.axisLine.lineStyle.color 相同
            borderColor: '',  //文本标签的边框颜色
            borderWidth: 0,   //文本标签的边框宽度
            shadowBlur: 3,    //图形阴影模糊大小,配合shadowColor,shadowOffsetX,shadowOffsetY设置阴影效果
            shadowColor: #aaa,  //阴影颜色,支持的格式同color
            shadowOffsetX: 0,   //阴影水平方向上的偏移距离
            shadowOffsetY: 0    //阴影垂直方向上的偏移距离
        },
        lineStyle: {
            color: #555,    //颜色,文章链接如下  Echart图表之颜色color配置项大全
            width: 1,       //线宽
            type: solid,    //线的类型,属性值:solid/dashed/dotted/number/array
            dashOffset: 0,  //虚线偏移量,搭配type指定dashed/array实现虚线效果
            cap: 'butt',  //线段末端的绘制,butt方形/round圆形/square也是方形效果与butt不同
            join: 'bevel',  //设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性,bevel默认/round/miter
            miterLimit: 10,  //设置斜接面限制比例,只有当join为miter才有效,属性值:10默认值/number
            shadowBlur: 10,  //阴影模糊大小,该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
            shadowColor: '',   //阴影颜色,支持的格式同color
            shadowOffsetX: 0,  //阴影水平方向上的偏移距离
            shadowOffsetY: 0,  //阴影垂直方向上的偏移距离
            opacity: 1  //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形
        },  
        shadowStyle: {
            color: '#fff',    //颜色,文章链接如下  Echart图表之颜色color配置项大全
            shadowBlur: 10,  
            shadowColor: '',  
            shadowOffsetX: 0,  
            shadowOffsetY: 0,  
            opacity: 1
        },  
        crossStyle: {
            color: '#fff',  //颜色,文章链接如下  Echart图表之颜色color配置项大全
            shadowBlur: 10,  
            shadowColor: '',  
            shadowOffsetX: 0,  
            shadowOffsetY: 0,  
            opacity: 1
        },  
        animation: line,    //是否开启动画
        animationThreshold: 2000,     //是否开启动画的阈值
        animationDuration: 1000,      //初始动画的时长,支持回调函数
        animationEasing: 'cubicOut',  //初始动画的缓动效果
        animationDelay: 0,  //初始动画的延迟,支持回调函数
        animationDurationUpdate: 200,  //数据更新动画的时长,支持回调函数
        animationEasingUpdate: exponentialOut,  //数据更新动画的缓动效果
    },
    showContent: true,     //是否显示提示框浮层,默认显示
    alwaysShowContent: false,      //是否永远显示提示框内容
    triggerOn: 'mousemove|click',  //提示框触发条件,mousemove/click/mousemove|click/none。none时可通过action.tooltip.showTip和action.tooltip.hideTip来手动触发和隐藏。也可通过axisPointer.handle来触发或隐藏
    showDelay: 0,         //浮层显示的延迟,默认0ms
    hideDelay: 100,       //浮层隐藏的延迟
    enterable: false,     //鼠标是否可进入提示框浮层中,默认为false
    renderMode: 'html',   //浮层的渲染模式,html默认/richText富文本形式
    confine: false,       //是否将 tooltip 框限制在图表的区域内
    appendToBody: false,  //是否将组件DOM节点添加为HTML的<body>子节点。只有当renderMode为html有意义
    className: 'echarts-tooltip echarts-tooltip-dark',  //指定tooltip的DOM节点CSS类,只在html模式下生效
    transitionDuration: 0.4,  //提示框浮层的移动动画过渡时间,单位是s
    position: [],        //提示框浮层的位置
    formatter: ()=>{},   //提示框浮层内容格式器,用这个可以修改提示框默认内容
    valueFormatter: (value: number | string) => string,  //数值显示部分的格式化回调函数
    backgroundColor: '',  //背景颜色,格式同color
    borderColor: '',      //提示框浮层边框颜色,格式同color
    borderWidth: 0,       //提示框浮层的边框宽
    padding: 5,  
    textStyle: {
        color: '#fff',    //颜色,文章链接如下  Echart图表之颜色color配置项大全
        fontStyle: '',
        fontWeight: '',
        fontFamily: '',
        fontSize: 14,
        lineHeight : 20,
        width: 220,
        height: 20,
        textBorderColor: '',      //文字本身的描边颜色
        textBorderWidth: '',      //文字本身的描边宽度
        textBorderType: 'solid',  //文字本身描边类型,属性值:solid/dashed/dotted/number/array
        textBorderDashOffset: 0,  //虚线偏移量,可搭配textBorderType指定dashed/array实现灵活的虚线效果
        textShadowColor: 'transparent',  //文字本身阴影颜色
        textShadowBlur: 0,     //文字本身阴影长度
        textShadowOffsetX: 0,  //文字本身阴影 X 偏移
        textShadowOffsetY: 0,  //文字本身阴影 Y 偏移
        overflow: 'none',  //文字超出宽度是否截断或者换行,配置width时有效,属性值:truncate/break/breakAll
        ellipsis: '',   //在overflow配置为'truncate'的时,该属性配置末尾显示文本
        rich: {},       //自定义富文本样式
    },  
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',  //额外附加到浮层的 css 样式
    order: 'seriesAsc'    //多系列提示框浮层排列顺序,seriesAsc默认/seriesDesc/valueAsc/valueDesc
}

4、坐标轴

xAxis{

type:"category" / "value"

name:轴的名字

nameTextStyle:{轴名字的样式设置}

nameGap:坐标轴名字与坐标轴之间的距离

position:"bottom" / "top"  当有两根X轴是需要设置

boundaryGap: 坐标轴留白部分设置 类目轴:true / false;  非类目轴:数组 [10,20]

axisLabel:{  // 坐标轴刻度文字
  color:颜色
  fontSize:字体大小
  formatter:str=>{  // 换行
   return `{a|${str.substr(0,5)}\n${str.substr(0,4)}...}`
  }
}

splitLine:{  // 刻度线延伸线
  show: true / false
  lineStyle:{
    color:颜色
    width:线条粗细
    type:"solid" / "dashed" / "dotted"
    }
  }

}

5、series基本使用与配置项

type:图表类型

itemStyle:样式

itemStyle.decal:图形的贴花图案

emphasis:高亮样式

blur:淡出时的图形样式和标签样式

select:数据选中时的图形样式和标签样式

data:数据

markPoint:图表标注

markLine:图表标线

markArea:图表标域,常用于标记图表中某个范围的数据

universalTransition:全局过渡动画相关的配置

tooltip:本系列特定的 tooltip 设定

 {  
    type: 'line',	   //line表示折线图,bar表示柱状图,pie表示饼图,scatter表示散点图   
    name: '数据系列1',  //名称,用于tooltip的显示,legend的图例筛选等   
    data: [1, 2, 3, 4, 5],   //数据,可以是数组,也可以是函数,详见下面的data配置项    
    itemStyle: {    // 样式配置,如颜色、线条粗细、图形类型等
        color: '#ff4c4c',    //线条颜色
        borderWidth: 2,      //线条粗细
        borderType: 'solid', //线条类型
        borderColor: '#fff', //线条颜色
        lineStyle: {
            type: 'solid',   //线条类型
            width: 2,        //线条粗细
            color: '#ff4c4c' //线条颜色
        },
        areaStyle: {
            color: '#ff4c4c' //填充颜色
        },
        symbol: 'circle',    //点的形状
        symbolSize: 10       //点的大小
    },    
    label: {      //标签配置,如显示文本、文本位置、文本样式等
        show: true,         //是否显示标签
        position: 'top',    //标签位置,如'top'、'bottom'、'left'、'right'等
        formatter: '{c}',   //标签文本格式化字符串,支持'{a}'、'{b}'、'{c}'等变量
        color: '#666',      //标签颜色
        fontWeight: 'bold', //标签字体粗细
        fontFamily: 'Arial', //标签字体
        fontSize: 16         //标签字号
    },
    markPoint: {  //标记配置,如显示点、点的样式、点的大小等
        data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' }
        ],
        symbol: 'circle',   //点的形状
        symbolSize: 10,     //点的大小
        label: {
            show: true,     //是否显示标签
            color: '#666',  //标签颜色
            fontWeight: 'bold',    //标签字体粗细
            fontFamily: 'Arial',   //标签字体
            fontSize: 16           //标签字号
        }
    },
    animation: {  //动画配置,如动画类型、动画时长、动画延迟等
        type: 'scale',     //动画类型,如'scale'、'fadeIn'、'explode'等
        duration: 1000,    //动画时长,单位为ms
        delay: 0,          //动画延迟,单位为ms
        easing: 'cubicOut' //动画缓动函数,如'linear'、'easeIn'、'cubicOut'等
    },
    smooth: false,        //是否开启平滑曲线
    gradient: {           //是否开启渐变色
        type: 'linear',       //渐变类型,如'linear'、'radial'等
        colorStops: [{ offset: 0, color: '#ff4c4c' }, { offset: 1, color: '#fff' }], // 渐变颜色
        global: false        //是否全局开启渐变色
    } 
}
type的图表类型:

line:折线图、面积图,可用于直角坐标系和极坐标系。设置 areaStyle 后可以绘制面积图。
bar:柱状图、条形图。
pie:饼图,主要用于表现不同类目的数据在总和中的占比。也可以通过配置 roseType 显示成南丁格尔图。
scatter:散点图、气泡图。可用于直角坐标系、极坐标希、地理坐标系。
effectScatter:带有涟漪特效动画的散点图,利用动画特效可以将某些想要突出的数据进行视觉突出
radar:雷达图,主要用于表现多变量的数据,例如属性分析。
tree:数图、主要用来可视化树形数据结构,是一种特殊的层次类型,具有唯一的根节点,左子树和右子树
treemap:是一种常见的表达层级数据、树状数据的可视化形式
sunburst:旭日图,由多层的环形图组成,在数据结构上,内圈是外圈的父节点。
boxplot:箱型图、箱线图,是一种用作显示一组数据分散情况资料的统计图。能够显示出一组数据的最大值、最小值、中位数、下四分位数、上四分位数
candlestick:K线图
heatmap:热力图,主要通过颜色取表现数值的大小,必须配合visualMap组件使用
map:地图
parallel:平行坐标系的系列
lines:路径图,用于带有起点和终点信息的线数据的绘制,主要用于航线、路线可视化
graph:关系图,用于展现节点与节点之间的关系数据
sankey:桑基图,是一种特殊的流图(可以看作是有向无环图)。 它主要用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态。
funnel:漏斗图
gauge:仪表盘
pictorialBar:象形柱图,象形柱图是可以设置各种具象图形元素(如图片、SVG PathData 等)的柱状图。往往用在信息图中。用于有至少一个类目轴或时间轴的直角坐标系上。
themeRiver:主题河流,是一种特殊的流图, 它主要用来表示事件或主题等在一段时间内的变化。
custom:自定义系列,自定义系列可以自定义系列中的图形元素渲染,从而能扩展出不同的图表。

标签:Echert,Vue,颜色,10,color,图例,可视化,type,echarts
From: https://blog.csdn.net/m0_49008668/article/details/141933574

相关文章

  • Vue 实现图片下拉选择控件
    element-ui的组件库中没有图片下拉选择组件,基于el-select组件做的改动并不能完全满足需求,因此决定重写一个。从头到尾做下来收获很多,我决定把实现过程中遇到的问题记录一下。效果图在线试用地址设计要点接下来将上面代码中的关键部分拆分介绍1.回显选中的图片和lab......
  • vue3 tsx 测试几种使用方式
    总论tsxsetup里面定义了returndom元素,则optionsapi的render函数不生效options的render函数生效前提是setup里面不能returndomoptions的render里面可以直接使用this访问setup里面的数据或者ctxtsx一般最好用defineComponent包裹,这样响应式才能生效tsxdom语法使用{}......
  • TensorRT量化模型分析(耗时分布可视化等)
    文章目录TensorRT量化模型分析一背景二准备工作1.代码准备2.依赖环境三分析过程1.导出模型2.模型形态比对3.转tensorrt序列化文件4.tensorrt序列化文件(即tensorrt模型)分析四其他TIPSTensorRT量化模型分析一背景​在TensorRT模型量化......
  • php基于Vue的助农生鲜销售系统的设计与实现(源码+文档+调试+讲解)
    收藏关注不迷路!!......
  • springboot+vue+mybatis计算机毕业设计房屋租赁管理系统+PPT+论文+讲解+售后
    随着社会的不断进步与发展,人们经济水平也不断的提高,于是对各行各业需求也越来越高。特别是从2019年新型冠状病毒爆发以来,利用计算机网络来处理各行业事务这一概念更深入人心,由于工作繁忙以及疫情的原因,房屋租赁也是比较难实施的。如果开发一款房屋租赁管理系统,可以让用户在最......
  • 如何在IDEA里面搭建VUE脚手架并成功运行
    如何在IDEA里面成功搭建VUE脚手架并在IDEA成功运行:先在IDEA里面成功搭建一个maven工程然后在本地打开项目并创建一个文件夹(我这里创建的是blog-web)点进刚刚创建的文件夹进入命令行模式安装VUE命令:npminstall-g@vue/cli输入命令查看是否安装成功命令:vue--version......
  • 基于java+springboot+vue的考研资料分享微信小程序
    项目介绍互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。针对高校教师成果信息管理混乱,出错率高,信息安全性差,劳动强度大,费时费力等问题,采用考研资料分享系统可以有......
  • 基于java+ssm+vue的婚庆摄影小程序
    项目介绍社会发展日新月异,用计算机应用实现数据管理功能已经算是很完善的了,但是随着移动互联网的到来,处理信息不再受制于地理位置的限制,处理信息及时高效,备受人们的喜爱。所以各大互联网厂商都瞄准移动互联网这个潮流进行各大布局,经过多年的大浪淘沙,各种移动操作系统的不断......
  • 基于java+springboot+vue的高校就业招聘系统
    ......
  • 基于SpringBoot+Vue+Uniapp的大学生党务知识学习微信小程序
    文章目录前言详细视频演示论文参考具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我自己的网站([小蔡coding](https://xiaocaicoding.cn/))代码参考数据库参考源码获取前言......