多Y轴示例

//多Y轴示例

<template>

<div id="main" :style="{width:‘1000px‘,height:‘500px‘ }"></div>

</template>

<script>

export default {

name: "demo10",

data() {

return {};

},

mounted() {

app.title = "多 Y 轴示例";

var colors = ["#5793f3", "#d14a61", "#675bba"];

//可以在这个地方设置提示表头的颜色

let myChart = this.$echarts.init(document.getElementById("main"));

myChart.setOption({

color: colors,//在这个地方引入进去

tooltip: {

trigger: "axis",

axisPointer: {

type: "cross"

}

},

//调整图表位置百分比的

grid: {

right: "20%"//让这个图表不会溢出

},

toolbox: {

feature: {

dataView: { show: true, readOnly: false },//数据视图里面的刷新

restore: { show: true },

saveAsImage: { show: true }

}

},

legend: {

data: ["蒸发量", "降水量", "平均温度"]

},

xAxis: [

{

type: "category",

axisTick: {

alignWithLabel: true

},

data: [

"1月",

"2月",

"3月",

"4月",

"5月",

"6月",

"7月",

"8月",

"9月",

"10月",

"11月",

"12月"

]

}

],

//需要多个Y轴就在这写对象

yAxis: [

{

type: "value",

name: "蒸发量",

//可以设置最大最小值

min: 0,

max: 250,

position: "right",

axisLine: {

lineStyle: {

//通过数组下标选取需要的颜色

color: colors[0]

}

},

axisLabel: {

formatter: "{value} ml"//通过type属性后面加上单位

}

},

{

type: "value",

name: "降水量",

min: 0,

max: 250,

position: "right",

offset: 80,//两个都靠右,这个设置之间的距离

axisLine: {

lineStyle: {

color: colors[1]

}

},

axisLabel: {

formatter: "{value} ml"

}

},

{

type: "value",

name: "温度",

min: 0,

max: 25,

position: "left",

axisLine: {

lineStyle: {

color: colors[2]

}

},

axisLabel: {

formatter: "{value} °C"

}

}

],

series: [

{

name: "蒸发量",

type: "bar",

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: "降水量",

type: "bar",

yAxisIndex: 1,

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: "平均温度",

type: "line",

yAxisIndex: 2,

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

]

}

]

});

}

};

</script>

原文地址:https://www.cnblogs.com/huchong-bk/p/11356538.html

时间: 2024-11-02 05:04:23

多Y轴示例的相关文章

MeteoInfoLab脚本示例:多Y轴图

数据范围相差比较大的数据序列进行对比的时候多Y轴图就很重要了.MeteoInfoLab中提供了一个twinx函数来根据已有的坐标系(Axes)生成一个新的Axes,这个命令会使得已有的Axes不绘制右边的Y轴,而新生成的Axes只绘制右边的Y轴.yaxis函数可以对某个Axes的Y轴进行相应的设置,第一个参数是某个Axes的对象,可以设置Y轴的颜色(color)和偏移(shift),对于超过2个Y轴的图形来说第3个Y轴就必须设置偏移以避免压盖. 双Y轴图: 多Y轴图: 脚本程序: ax1 = a

[DevExpress]ChartControl之创建X,Y轴Title示例

关键代码: /// <summary> /// 设置X轴Title /// </summary> /// <param name="chart">ChartControl</param> /// <param name="titleText">Title文字</param> /// <param name="titleColor">Title文字颜色</pa

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文: 默认情况下如下图 Y轴并不是从0开始,这样折现图的幅度会很大,不是正常的幅度,解决办法如下, 示例代码: window.onload = function () { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartDat

EChart 标题 title 样式,x轴、y轴坐标显示,调整图表位置等

示例里工作一般情况是够用了,更复杂的可以查询教程: title 官方解说:http://echarts.baidu.com/option.html#title 坐标相关: X轴:http://echarts.baidu.com/option.html#xAxis 坐标相关: Y轴:http://echarts.baidu.com/option.html#yAxis 表格部分:http://echarts.baidu.com/option.html#grid <script> function

WPF Toolkit Chart--多Y轴显示

效果: <Window x:Class="Chart.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width=&quo

Jqplot(双Y轴)使用汇总

最近需要用Jqplot做双Y轴的Chart图,首先我找到了文档上的例子并对数据做了一些调整: 1.例子展示: var s1 = [["2002-01-01", 112000], ["2003-01-01", 122000], ["2004-01-01", 104000], ["2005-01-01", 99000], ["2006-01-01", 121000], ["2007-01-01&quo

【原】为DevExpress的ChartControl添加Y轴控制 和 GridControl中指定列添加超级链接

一.控制ChartControl的Y轴范围 使用Devexpress中的CharControl控件,需要控制AxisY轴的显示范围,需要使用该控件的BoundDataChanged事件,具体代码如下: 该代码实现的效果如下:   二.设置GridControl表格中的超级链接: 1.首先在表格的设计器中添加一个HyperLinkEdit 的 Repository: 2.将该Repository绑定到列表中的指定列中: 3.为第一步添加的rpLink控件添加Open_Link事件处理函数: 4.最

echart折线堆叠图 Y轴数据不堆叠

<!DOCTYPE html> <html> <head></head> <body>     <div class="row form-inline form-ranking">     <div class="form-group">         <label class="control-label">店铺:</label>   

matlab画二维直方图以及双y轴坐标如何修改另一边y轴的颜色

1.首先讲一下如何用hist画二维直方图 1 x=[-568179 -766698 -935586 -826865 -393971 -771826 -1529945 -1910695 -1694740 -926367 -306998 -844840 -1828334 -2062815 -2297296 -1498824 -411346 -827922 -1826636 -1844777 -1862918 -1881060 -746534 -100479 -845832 -1832756 -194